Report Blog Entry
Hello! This is a smaller blog series explaining how to create certain effects for your profile. This is a pretty simple effect to pull off, but it looks really good with the right patterns and backgrounds!
This will be focusing on making a scrolling background, this looks better with images specifically meant to be repeated like patterns. The effect can be applied to any element but is pretty distracting so be careful when using it.
??
How it Works - background-position & @keyframes
Just explaining the properties used and how they work.
Short
section.
This effect is reliant on a simple animation with some adjustable rules in order to work, you will need to have the dimensions for your image explicitly set in your background decloration.
background: 0px 0px / 40px 40px url("https://example.com/image.png")
Yellow is for
background position, which is a variable you need.
Blue
is for background-size, this is also needed for the @keyframes animation.
The animation itself just loops to a position where it would be the exact same as the starting value, since it's a repeating background, when the animation snaps the position back to the starting one; it doesn't make any difference due to the fact there is no difference between the starting and end positions, so it just looks like it moves infinitely.
You can refer to the links below to learn how @keyframes & background-position are used in this effect.
Mozilla Developer Network: background-positionMozilla Developer Network: @keyframes
My blog about @keyframes and interactivity
How to Create
For people who want to make this on their own.
Please
credit.
This works with any image, but i'd suggest finding a repeatable background image or small icon to use. Also you will need to define your background's size, for example the image below is set to 20px 20px, also you cannot use norepeat on your background.
For your element, declare your background like this:
.example-element {
background: 0px 0px / 70px 70px url("example-img-url.png");
}
not animated
After that, you need to create a new @keyframes declaration with the name of your animation. You will have to put this outside of the element's style rules.
@keyframes scrolling-background {
from {
background-position: 0px 0px;
}
to {
background-position: 70px 70px; /* this has to be equal to the size you declared for your image. */
}
}
Then, add an animation property to your element and reference the keyframes you just created.
.example-element {
background: 0px 0px / 70px 70px url("example-img-url.png");
animation: 2s scrolling-background linear infinite;
}
After that, your element's background should look like this:
animated
After that, you can tweak the animation properties to get the effect you wish. Try flipping the X position to a negative and reverse the direction the background moves, or try changing the the easing mode so it snaps infinitely.
{ }
Stylesheet
CSS for the effect shown.
Please credit.
Copy this and put it inside a style tag, change html to any other element if needed.
html {
background: 0px 0px / 4rem 4rem url("https://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg444.jpg");
animation: scroll 4s infinite linear;
}
@keyframes {
from {
background-position: 0px 0px;
}
to {
background-position: 4rem 4rem;
}
}
Thank you for reading this entry, there will be a new one next week either about splaying SpaceHey profiles using display: contents; or sleek intro animations. Let me know which one of these two you'd rather learn.
If you've never seen the first entry in my Comprehensive guide series, i'd reccomend you'd do so, as it runs down how some of the fundementals work. It also showcases how to get an IDE set up for your SpaceHey profile.
Comprehensive Guide to Layout Building #1I'll be seeing all of you guys later, I gotta go back to creating something new!
Pawtals.
Web developer. Email or IM me for help with anything.
Comments
Displaying 13 of 13 comments ( View all | Add Comment )
Raidian
Hey everyone, sorry for the delay for the promised blog’s release. I’ve been busy with work but hopefully the next week should be light on me.
Also #1 blog..? Thank you all so much!
by Raidian; ; Report
c2er
OMYGAWD BRO THIS LAYOUT THINGY IS SO GOOD WTH youve got actual godly talent to be able to make smth like this while only being a web dev for a year
THIS IS SO COOL
nikki
omg i thought i got transported to a different site this is so cool
zeeluhzombiez
is this spacehey premium(this is SOO cool btw)
☣ Lab Specimen
This is such a cool blog layout,, looks like a different website
Thank you!
by Raidian; ; Report
Izzy
I turned away, where the hell am I. /pos
Ok.
by Raidian; ; Report
✶Rib𓆩𓁺𓆪Eye Black Dragon✶
This is so sleek! I love it *-*
I was experimenting blogs with more effort other than copypasting others' layouts by making CSS from the ground up. You inspire me
by ✶Rib𓆩𓁺𓆪Eye Black Dragon✶; ; Report
Thank you, I just have a talent for this.
by Raidian; ; Report
Jessica Vandoop
Had to check if I was still on Spacehey or not when I clicked here. LOL
𝕳𝖔𝖙𝖙𝖔𝖕𝖎𝖈 𝖂𝖆𝖓𝖓𝖆𝖇𝖊 (layout not mobile friendly sry)
omg this layout is insane?? I'll definetly be following your blog from now on!!!! :D
also ty for the tutorial :DD
Thank you for the support!
by Raidian; ; Report
You're welcome!! :D
by 𝕳𝖔𝖙𝖙𝖔𝖕𝖎𝖈 𝖂𝖆𝖓𝖓𝖆𝖇𝖊 (layout not mobile friendly sry); ; Report
(an)
clicked on this blog NOT EXPECTING the entire layout change like completely I APPLAUD YOU MAN!!!! and thanks for the tip!
Thank you too.
by Raidian; ; Report
vampnyan
YEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEAAAH
oh yeah
by Raidian; ; Report
uncleonion♪
this is really cool!!!!! im looking forward to this series of tutorials and learn more about css (: also i find all the extensive and detailed blog layout editing on this blog to be nice!!!!
Thank you.
by Raidian; ; Report
minesweepooper
very nice guide! i also think the "Featured User" on your blog layout is very creative :)
Thanks!
by Raidian; ; Report