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 57 comments ( View all | Add Comment )

noLAn	1761346982 using Report Comment
KKNOPE00	1761272862 LIKE THISSSS!!!! Report Comment
JONAS	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; 1761458491; Report
ussewaaa	1760717320 using Report Comment
R@teater	1760064524 using!!! Report Comment
Adadele	1759867089 So cute!! Report Comment
♡AJN♡	1759137930 using Report Comment
Marilyn ⏾⋆.˚	1758836394 usingggg Report Comment
St4r	1758516945 Using! Report Comment
⋆˚࿔ RUBYSITA☘️🎀🌈 .ᐟ ֹ ₊	1758402214 USING Report Comment
JAWS!!	1758224825 using :P Report Comment
ᴇᴍᴘʟᴏʏᴇᴇ 427	1758186149 using! Report Comment
bení	1757020746 using Report Comment
Speedwagon lover	1756740362 using!! :D Report Comment
Br00k3	1755370200 its not working for me :( Report Comment
C4asti3l2000	1754518715 using Report Comment
Izzy XD	1752038067 uz1ng Report Comment
abandoned.angel	1751524915 usingg Report Comment
Nikrad	1751273740 usingggg Report Comment
anti★thesis	1748933966 using : 3 Report Comment