Layout published by Lavender

published 1709831407
updated 1709831875

Add to Favorites

View Layouts

View Profile

Report Layout

Clippy Microsoft Office 97 windowed animation

Tags: windows, windows 95, windows 98, clippy, microsoft, buddy, gif, blue, 90s, 2000s

Description:

Hey, it's our good friend, Clippy! Here are several code snippets that will place an animation of Clippy in the bottom right corner of your page. Just choose your flavor! Feel free to adjust the placement, scale, etc. Credit goes to Noikaido309 over on Tumblr for the links to these gifs. The OG gifs can be found here and here.

Clippy waving animation Clippy star animation Clippy hair flip animation Clippy dispenser animation Clippy sine wave animation Clippy atom animation Clippy lookout animation Clippy listen animation Clippy tornado animation Clippy shovel animation Clippy paper animation Clippy mobile animation Clippy point right animation Clippy point left animation Clippy point up animation Clippy point down animation Clippy taking notes animation

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Lavender (https://layouts.spacehey.com/layout?id=101140) -->

<!-- WAVING ANIMATION -->
main::before {
content: url('https://64.media.tumblr.com/81478eb9ffb9781c73ccee76eaa24c1d/9de5b485b832b359-d5/s250x400/e12919a02226b0e529e4d1200cddf65fae58a6cf.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- STAR ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/54cea652c69317fe2d8a184d88f4e17c/ac61c809b5b25abd-aa/s250x400/ac4f6e10d4e24d5fefc21c291ecf3d9e6ee0cab3.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- HAIR FLIP ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/c06dc1b1853ff28c76e4f62a4ee70d59/9de5b485b832b359-cb/s250x400/a6ea18b264bacb63f1832a89d348eee34d6822f1.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- DISPENSER ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/55f0f289521c08874eb5eae6ce7ddf54/9de5b485b832b359-eb/s250x400/6fc42248e1e5d666eac2cc3b7058b8edec22faea.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- SINE WAVE ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/5f5978271079ba6d52d0f483d6ca1175/ac61c809b5b25abd-1c/s250x400/9e1de4eaaba24881df590e685648239005c0bb2b.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- ATOM ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/a34a5f212570184eca5b8d0bb4e2bdc2/ac61c809b5b25abd-b6/s250x400/bc735265fef8355cbd6439fd80ddd7ffd23cbc40.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- LOOKOUT ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/e24f303a3c9393219075b7fa259deb69/ac61c809b5b25abd-6e/s250x400/7f8c8f9e3fa676cb70bbf8d7604f3dbaf1392eed.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- LISTEN ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/a35a22bee70fd5350ccfb6bee1470338/ac61c809b5b25abd-47/s250x400/f40fe67b3aa87825b23ea7cb9debb7e09179d212.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- TORNADO ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/d9a0a6b332bdd5d979f960c68a75a0fd/ac61c809b5b25abd-97/s250x400/71ea853666c632b18ef3269142a1324d5e06a5ff.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- SHOVEL ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/49277407e075656ac3444e774141aebe/9de5b485b832b359-ef/s250x400/750f28564158fccac953823c0d2e461e5b414268.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- PAPER ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/1fc3668bbfed50407a2de1ed892f46a8/9de5b485b832b359-36/s250x400/8bc1ae62f5528e8a7089d76f6a22754f478e8cf3.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- MOBILE ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/37634296182996336384dfb7d4e72eb2/9de5b485b832b359-a7/s250x400/58a62d2a483d35e7845902d1f84c3a3ef336b1d5.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- POINT RIGHT ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/e9e375c2b996a580d239f6d2ff9bf20f/ac61c809b5b25abd-e3/s250x400/b5c722bbb39a5bfebc355f0de6f56a51df8847b9.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- POINT LEFT ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/39ec64bdd7971142a0804fdd0e7c36bf/9de5b485b832b359-4b/s250x400/836c68f10813ff631ed281c245cf71b2b077ee9f.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- POINT UP ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/a1a04ebc24f93ccc72e8ff7ccefca6f3/9de5b485b832b359-5a/s250x400/b8b34dff2cdcb710741a11c01f60770ad87ff52d.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- POINT DOWN ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/f9579b2e3b74fd711b1385331780ddc4/ac61c809b5b25abd-47/s250x400/1b376c0d8244ee132d4f5fa66925376924fb5d64.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

&lt;! -- TAKING NOTES ANIMATION --&gt;
main::before {
content: url('https://64.media.tumblr.com/ee1f76f33940cda72d96b3cd9781e581/ac61c809b5b25abd-ad/s250x400/773e2c1120e54f5eee949c743552e7614d7914d8.gifv');
position: fixed;
bottom: 5%;
right: 5%;
z-index: 2;
}

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 66 comments ( View all | Add Comment )

Dee	1769378254 Using! Report Comment
pR3tty_FLY_4_aWH1TEguy	1768941932 using thx Report Comment
SickoSky:P	1767761473 Using! Report Comment
seacreature5	1767710825 using! Report Comment
princess	1766495012 using Report Comment
Camp!	1766110246 usin!!! Report Comment
HEINRICH	1765036466 using,thank you Report Comment
PAPAROBL0X	1764915137 using Report Comment
dexran	1763495065 using Report Comment
noLAn	1761346982 using Report Comment
KKNOPE00	1761272862 LIKE THISSSS!!!! Report Comment
JONAS JAWBREAKER	1760850706 this code isnt working for me (and it seems like it isnt working for anybody else, because whenever i check the profiles of users commenting 'using!' they dont have this animation anywhere on their profile). So, if it isn't working for you either, use this! you can adjust it however you want, by changing the width and/or height, or if you want it in a different corner of your profile, you can change right to left, or top to bottom Report Comment your comment didnt save your code BTW, but i appreciate you trying to help out. i did a bit of troubleshooting as well but i didnt have any issues adding it to my page. the links themselves arent dead and i posted it exactly as-is into my profile "About Me" which indicates the formatting is correct. if a lot of people have said "using" its probably fine, i suspect they just removed it from their pages because it didnt fit their aesthetics haha, which is totally understandable. its possible that if it wasnt working for you, the code was being overwritten somewhere else in your overall layout (aka there was another "main:before" chunk later on in your code). so if your solution was to change what the Clippy window was relative to (aka swapping out "main" with "nav" or another "div"), then you did good. either way, you got it figured out, so thanks for letting me know anyway. by Lavender; 1761144893; Report I can't remember what I did exactly to fix it for me, i didnt think about the fact it could be overwritten.. but basically i took the code for the gif of clippy and stuck it into the img url section for the code for the little lps cat on my profile and then i put it in the top right corner instead of the bottom left and i moved it around a little bit. by JONAS JAWBREAKER; 1761458491; Report
ussewaaa	1760717320 using Report Comment
R@teater	1760064524 using!!! Report Comment
Adadele	1759867089 So cute!! Report Comment
Marilyn ⏾⋆.˚	1758836394 usingggg Report Comment
St4r	1758516945 Using! Report Comment
⋆˚࿔ RUBYSITA☘️🎀🌈 .ᐟ ֹ ₊	1758402214 USING Report Comment
JAWS!!	1758224825 using :P Report Comment