I need to make a lazyload that actually works like one that is in Facebook. I created a css class that has this.
#keyframes placeholder {
0% { background-position: -600px 0 }
100% { background-position: 600px 0 }
}
.text-loader{
color: transparent !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholder;
animation-timing-function: linear;
background: #eeeeee;
background: linear-gradient(to right, #eee 8%, #419AF3 18%, #eee 33%);
background-size: 1200px 100px;
min-height: 30px;
width: 100%;
margin: 5px 0 5px 0;
border-radius: 3px;
&::selection{
color: transparent;
}
}
And wrote some scripts to make it look like it actually works.
var agalar = $("span, p, h1, h2, h3");
$(".contents").find(agalar).each(function(){
$(this).addClass("text-loader");
});
$(window).on("load",function(){
$(agalar).removeClass("text-loader");
});
Everything "seems" to work but I am not sure if it actually works. (I am making an infinite scrolling section so I guess will need to pull content from back-end), the thing is how can I make this a real lazyload?
Related
I have some text that I want to animate. The text should change color from white to green from top to bottom. I want the new color to basically drop from the top.
body{
background-color: lightblue;
}
#test {
animation: changeColor infinite;
animation-timing-function: ease-out;
animation-duration: 5s;
font-size: 40px;
color:white;
}
#keyframes changeColor {
0% {
color: linear-gradient(to bottom, white, #2E7D32 50%) bottom;
}
100% {
color: green;
}
}
<div id="test">The</div>
An Example
Source for the below snippet. The following animation occurs on hover, however this is just an example to demonstrate what I wish to achieve. Some changes I require are that the font colour should change from top to bottom and it should use keyframes(animation).
#import url("https://fonts.googleapis.com/css?family=Barlow:800&display=swap");
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: "Barlow", sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
a {
position: relative;
display: inline-block;
font-size: 2em;
font-weight: 800;
color: royalblue;
overflow: hidden;
background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
transition: background-position 275ms ease;
text-decoration: none;
}
a:hover {
background-position: 0 100%;
}
Link Hover
background + background-clip might be what you look for:
because of a demo (below) it could not be just a comment :) .
reset the gradient to your needs if you need a sharp color transition
body{
background:lightblue;
}
#test {
animation: changeColor infinite linear 5s forwards;
font-size: 40px;
color:transparent;
background:linear-gradient(to bottom, #2E7D32 , white, #2E7D32 ) bottom left/ 100% 600% ;
background-clip:text;
}
#keyframes changeColor {
to { background-position: top left;
}
}
<div id="test">The</div>
I figured out how to accomplish, so I'm answering my own question.
let titleIDThe = document.getElementById("titleIDThe");
titleIDThe.classList.add("animateColor");
.animateColor {
animation: changeColor infinite;
animation-timing-function: ease-out;
animation-duration: 10s;
background-image: linear-gradient(to bottom, red 50%, #2E7D32 50%);
background-position: 0% 0%;
background-size: 100% 200%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
width: 50vw;
height: 50vh;
font-size: 30px;
}
#keyframes changeColor {
0% {
background-position: 0% 0%;
}
20% {
background-position: 0% -100%;
}
30% {
background-position: 0% -100%;
}
50% {
background-position: 0% 0%;
}
100% {
background-position: 0% 0%;
}
}
<span id="titleIDThe">The</span>
I am looking for a way to overwrite the background color from the top to bottom. More specifically, I would like it to be filled from top to bottom. Currently I have managed to produce a "faded" animation.
This is what I have now:
.page-dark {
background: #003850;
background-color: #003850;
color: white;
-o-animation: fadeIt 3s linear;
animation: fadeIt 3s linear;
}
#-o-keyframes fadeIt {
0% { background-color: #ff711b; }
50% { background-color: #ff711b; }
100% { background-color: #003850; }
}
#keyframes fadeIt {
0% { background-color: #ff711b; }
50% { background-color: #ff711b; }
100% { background-color: #003850; }
}
You can create a background with two colors using linear-gradient(). Set the background height to 200% using background-size, and hide one of the colors using background-position. Now animate the background position to show the other color:
.page-dark {
height: 90vh;
background: linear-gradient(to bottom, #003850 50%, #ff711b 50%);
background-size: 100% 200%;
background-position: 0 100%;
color: white;
animation: slideColor 3s linear forwards;
}
#keyframes slideColor {
to { background-position: 0 0 }
}
<div class="page-dark"></div>
Another option is to set the color you want to hide as the background, animation background-position to show the 2nd background (which we create using linear-gradient()):
.page-dark {
height: 90vh;
background: #ff711b linear-gradient(to bottom, #003850 0, #003850 100%) no-repeat;
background-size: 100% 0;
color: white;
animation: slideColor 3s linear forwards;
}
#keyframes slideColor {
to { background-size: 100% 100%; }
}
<div class="page-dark"></div>
I have a circular div that is vertically and horizontally centered in div. I am trying to achieve a css animation, that it seems like it's fading in from top to bottom.
I thought of making height 0 initially and moving to 50px, however as it is centered, it starts to getting created from the center. Instead, I want to it to get positioned to the initial position and it gets created from top to bottom. Just like there is a square only masking the circle and nothing else, and it moves to down.
#circle {
width: 80px;
height: 80px;
border-radius: 50px;
}
How can I add this a square mask to achieve the below effect?
Please note that background has a gradient, so I can't put a square and assign it a color directly, thus I thought I need to mask them.
How to achieve this effect?
What I have tried:
#keyframes example {
from {height: 0}
to {height: 80px}
}
As the circle is centered, it starts to expand from the middle. This is not what I want. That's why I thought of the mask
Edited answer:
I am able to achieve this with a combination of a image background and background-position animation.
This will not work if you set the background as a CSS color like #fff. it needs to be an image or a gradient. You also need to set background-repeat to no-repeat
The animation simply starts with the background out of the div display area then pulls the the background downward into the display area.
Kindly check the examples in full-screen.
Working snippet (jpeg image as object background):
body {
background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
margin: 0 auto;
height: 120vh;
overflow: hidden;
}
.sun {
height: 400px;
width: 400px;
border-radius: 100vw;
margin: 5em auto;
animation-name: sunrise;
animation-duration: 10s;
animation-delay: .5s;
animation-timing-function: linear;
animation-iteration-count: 1;
background: url(https://image.ibb.co/eVdQ3Q/white.jpg);
background-repeat: no-repeat;
animation-fill-mode: forwards;
opacity: 0;
}
#keyframes sunrise {
from {
opacity: 1;
background-position: 0 -700px;
}
to {
opacity: 1;
background-position: 0 0px;
}
}
<div class="sun"></div>
Working snippet (gradient as object background):
body {
background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
margin: 0 auto;
height: 120vh;
overflow: hidden;
}
.sun {
height: 400px;
width: 400px;
border-radius: 100vw;
margin: 5em auto;
animation-name: sunrise;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: 1;
background: linear-gradient(white,white);
background-repeat: no-repeat;
animation-fill-mode: forwards;
opacity: 0;
}
#keyframes sunrise {
from {
opacity: 1;
background-position: 0 -700px;
}
to {
opacity: 1;
background-position: 0 0px;
}
}
<div class="sun"></div>
I have the following code for background clip using css3. I am trying to use animation so that the text eventually turns white and background simultaneously gets revealed. But I can't get it right. Is it even possible to do this with just css?
.text {
background-image: url('images/car.jpg');
font-size: 90px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-fill-color: transparent;
background-clip: text;
animation-name: flip;
animation-duration: 4s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes flip {
0% {
background-image: url('images/car.jpg');
font-size: 250px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-fill-color: transparent;
background-clip: text;
}
100% {
color: #fff;
background-image: url('images/car.jpg');
font-size: 200px;
}
}
<div class="text"><b>Lorem Ipsum</b>
</div>
You may take a look at mix-blend-mode:
body {margin:0;}
.text {
min-height:100vh;
background-image: url('http://blog.hdwallsource.com/wp-content/uploads/2015/05/toy-car-wallpaper-39199-40102-hd-wallpapers.jpg');
background-size:cover;
font-size: 20vw;
}
b {
display:inline-block;
box-shadow:inset 0 0 0 1000px white, 0 0 0 1000px white;
mix-blend-mode:screen;
animation: flip 4s linear forwards;
}
#keyframes flip {
75% {
color: #fff;
}
100% {
color: #fff;
font-size: 15vw;
box-shadow:inset 0 0 0 1000px rgba(255,255,255,0), 0 0 0 2000px rgba(255,255,255,0);
}
}
<div class="text"><b>Tiny mini</b>
</div>
pen to play with: http://codepen.io/gc-nomade/pen/rWrvKP
I have a progress element like so:
body {
background: grey;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
height: 25px;
width: 95%;
position: relative;
top: 10px;
right: 50%;
left: 2.5%;
}
progress[value]::-webkit-progress-bar {
background-color: rgba(255,255,255,0.2);
border-radius: 50px;
border: solid;
border-width: 0px;
border-color: rgba(255,255,255,0.1);
}
progress[value]::-webkit-progress-value {
background-image: repeating-linear-gradient(
45deg,
#fff,
#fff 10px,
#f9f9f9 10px,
#f9f9f9 20px
);
border-radius: 50px;
-moz-animation-name: move;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-duration: 0.4s;
-moz-animation-delay: 1.5s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: move;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.4s;
animation-delay: 1.5s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 1.5s;
animation-play-state: running;
}
#keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
<progress max="100" value="80"></progress>
And I have used CSS animations, however for some reason they do not work. I want the stripes to move horizontally, infinitely. Is there any reason to why this doesn't work?
Note - <progress> is not well supported by IE. See this for a complete guide to make it work across browsers. Below demo is the simplified animation without <progress> element.
body {
background-color: #666;
}
div {
background-color: #999;
border-radius: 30px;
height: 30px;
}
div > div {
background-image: repeating-linear-gradient(-45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px);
background-size: 28px 30px;
animation: progress 2s linear infinite;
width: 50%;
}
#keyframes progress {
0% { background-position: 0 0; }
100% { background-position: 28px 0; }
}
<div><div></div></div>