I have a web site with a lot of images, I already have lazy-loading but I wish to add some
effects when the images loads
I was looking to reproduce the "zoom" effect when the image is "loading", something like here:
https://masonry.desandro.com/
Please, have a look at this one:
https://tympanus.net/Development/GridLoadingEffects/index8.html
You will notice that there is no effect when the image are already loaded.
I try to hide the 'load latency' when loading an image from the server.
Maybe the animation is not the right trick!
The goal is to have the load softer, now it loads like any image, but the effect is not very nice.
(you can check www.socloze.com for review).
Do you think we can do this in pure CSS (without JS)?
You can add initial animation:
.img-anim {
width: 100px;
height: 100px;
background-image: url('https://lh3.googleusercontent.com/proxy/Dv3m6UV5rC0KL0or-iOT-6i1I4i4I3CXNh-XU0WZ5-yG_vbYme6A8NhIasiwLon0td1DGbVFBDOEwi3LK7gegowFkjQEiJpPBg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
animation-name: scale-in;
animation-duration: .4s;
}
#keyframes scale-in {
0% {
background-size: 0%;
}
100% {
background-size: 100%;
}
}
<div class="img-anim"></div>
You can create initial animation usings css but thats as far as u go, if you need things to pop up as you scroll down then check AOS
Related
A few years back we added a note to our web page for users who are blocking JS. I would really like the note to stay hidden for folks who have JS on. The note's visibility relies on the body having a class body class="noJS". In order to remove that as swiftly as possible I have a JS as the very first item in the body tag that does not rely on anything but fires right away.
<!-- BODY element exists! -->
<script type="text/javascript">
/*<![CDATA[*/
document.body.className = document.body.className.replace(new RegExp(\'(?:^|\\s)\'+ \'no-js\' + \'(?:\\s|$)\'), \' \');
/*]]>*/
</script>
In Firefox I still see the note as a red flickering, for example on the top of the main page here https://www.colorperfect.com
Annoying, which leads to my question can I use CSS3 animations to fade in that note say after a one second delay? That should fix it I guess but I have never done anything with CSS animations so I figured I'd ask rather than fiddle... If that does not work other ideas would be welcome, too.
Edit:
This is the CSS that produces the red block. A simple matter of exchaning background and height.
body.noJS .single_navi_zeile
{
background-color:#BB0000;
height:12.7em;
background-position: left 0.5em bottom 0.3em;
background-repeat: no-repeat;
background-image: url("../grafik/nojs.png");
}
This should provide you the fade in effect you are after. Animation delays postpone when an animation starts and so you might end up with the element appearing, then vanishing suddenly only to fade back in again.
If you begin the animation right away but start from opacity: 0 and then after 1s (50% of a 2s duration) fade it back in you should get what you're after.
#keyframes fade-in {
0% {opacity: 0}
50% {opacity: 0}
100% {opacity: 1}
}
.anim-fade-in {
animation-name: fade-in;
animation-duration: 2s;
}
<p class="anim-fade-in">Some content</p>
Worth noting that the element is only hidden using opacity by this approach and so you may find that the page content moves as the element itself is present before being removed. You could experiment with sliding the element in instead.
did you try css for that?
.redBanner {
display: none;
}
body.no-js .redBanner {
display: block;
}
or with your example
body.no-js .single_navi_zeile {
background-color:#BB0000;
height:12.7em;
background-position: left 0.5em bottom 0.3em;
background-repeat: no-repeat;
background-image: url("../grafik/nojs.png");
}
I have fullscreen website with background-image: no-repeat and background-size: cover style on it. I want to make animation that the background image will resize in 10 second to the right side of the page to 350px width and 175px height. It's even possible to do it?
body {
background-image: url(/image.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
}
I saw some webkit animation but there was problem with the background-size: cover style, so the animation doesn't work.
I tried :
$(function(){
$('body').one("mouseover", function() {
$('body').addClass('hover');
});
});
But it will resize the image instantly and move it to the right, I want to resize them linear.
Thank you very much guys! :-)
You could add something like this to your css:
body {
background-position: center center;
transition: background-size 10s ease-in-out, background-position 10s ease-in-out;
}
body.hover {
background-size: 350px 170px;
background-position: right center;
}
https://codepen.io/anon/pen/oPbqPm
The problem with this, is however, that it won't animate the sizing.
I would suggest you don't set the image as background. Instead, position the image behind all other elements using position and z-index properties. Once set, you can add the animation. For more details on using z-index and position attributes see the link below and "try it yourself" example:-
https://www.w3schools.com/cssref/pr_pos_z-index.aspenter link description here
You can then use css animation for resizing of the imgae.
TO learn how to add animation see this link:-
https://www.w3schools.com/css/css3_animations.asp
I have a full background cover image for the home page in my project. I wonder is there a way to preload it somehow, so that it shows immediatly and not gradually like it is now. I have searched for the solutions but they are all mostly about preloading the images for the pages after the user is already on the website, I am wondering is there a way to somehow preload a cover image for the first page of the website?
This is what I have in the css file:
.section .image {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
z-index: 2;
position: absolute;
display: block;
background-image: url('/img/kid-cover.jpg');
animation: zoom 7s;
-webkit-animation-fill-mode: forwards;
}
You can get the image background with jquery in $(window).load.
see Preloading CSS Images.
Then, you can show a splash screen before preload the image and hide this when the image has been loaded.
Hope this helps.
regards
What I think that you could do is use a time interval in Javascript and make it so that the rest of the page has to wait 1000 milliseconds(1 second) to load and the background image not have to wait any time.
I am trying to make a instagram style explore page but i have one question here. I have created this DEMO from codepen.io .
In this demo you can see the images. The images width and height is different not a same. I want to crop that images with CSS Like this DEMO page.
The difference between the first and second demo
First demo :
.exPex {
width: 100%;
}
Second Demo:
.exPex {
width: 200%;
}
So second demo working just in crome but this is not good idea i think. Anyone can tell me, How do I obtain the results of their second demo?
You could set the images up as background images and use background-size: cover; to get the effect that you're looking for (DEMO). This has the downside that your users will not be able to right-click or drag the images (to save them, etc.) as they might be expecting to do.
HTML for an example image:
<div class="_jjzlb" style="background-image:url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
</div>
CSS:
._jjzlb {
position: relative;
padding-top: 100%;
width: 100%;
overflow: hidden;
margin: 1px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Optional centered background */
background-position: center;
}
If this downside is not acceptable, you could also put hidden images on top of the backgrounds so that they will work like the user expects.
HTML for an example image with normal image mouse interactions:
<div class="_jjzlb" style="background-image: url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
<img src="http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg" class="exPex">
</div>
CSS to hide the image on top:
.exPex {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity:0;
}
And here is a DEMO with the images, interacting with the user like you might expect them to.
EDIT: As pointed out by #GCyrillus, there are downsides to using a background image rather than keeping the images in the content of the page. These might include search engines and screen readers failing to recognize the image. I do not have an exhaustive list of the downsides but depending on your application it may be worth investigating.
you may use transform :
.exPex {
position: absolute;
left: 0;
top: 0;
min-width:100%;
margin: 0;
transform: scale(2);
transform-origin: 0 40px;
}
http://codepen.io/gc-nomade/pen/jrbPRy
if you define a dimension to the image the aspect ratio will also be included. The best way is to put your image inside a div and declare the size of images that way you will be able also to crop images.
Well it might seem obvious but you could just put a fixed width to it ? Try to change width: 100% with width: 400px on .exPex for example.
I'm currently developing a site in which 2 users go head to head in a "coin flip", a Materialize CSS modal pops up on each users screen (the winner has already been defined), I then want there to be a coin flip animation.
I'm going to use this coin flip animation: https://www.html5andbeyond.com/coin-flip-application-html-css-and-jquery/
My question is how can I set the coin flip to land on a specific winner before the animation, also, how can I change it so there's a custom image on each side?
Thanks,
James
Here are the changes to make in the css of that Codepen to place an image on either side of the coin. Click 'Edit on Codepen' on https://codepen.io/html5andblog/pen/pJZpee
#coin .front {
transform: translateZ(1px);
border-radius: 50%;
background-image: url('http://placehold.it/200x200/E8117F/000000');
background-size: cover;
display: block;
}
#coin .back {
transform: translateZ(-1px) rotateY(180deg);
border-radius: 50%;
background-image: url('http://placehold.it/200x200/000000/E8117F');
background-size: cover;
display: block;
}
To make the coin fall on a specific side do the following on that same codepen you gave us.
Heads:
Change the 'var spinArray' line to
var spinArray = ['animation1080'];
Tails:
Change the 'var spinArray' line to
var spinArray = ['animation900'];
I can't take it any further without having access to your code. That should be enough to figure it out though.
Hope this helps.
Best,
Tim