I am trying to use j-query to fade in my pages body upon load, however for some reason the body's background image is not being affected by the j-query. Please see the code I have below:
J-Query Code in head section:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').fadeIn(2000);
});
</script>
CSS Code:
body
{
overflow:hidden;
background:url('body.png') no-repeat;
background-size:100%;
display:none;
}
Everything contained within the body (div's / paragraphs / headings etc) fade in on load as per the j-query code, however the body's background image (body.png) loads instantly with the page. Please can anyone suggest what I'm doing wrong with the above code?
body behaves funny. You would need to wrap the contents of the entire page in another div and fade that in.
<body>
<div id="wrapper">
# Page Contents #
</div>
</body>
CSS:
#wrapper{
background-image:url('some-image.jpg');
display:none;
}
jQuery:
$(document).ready(function(){
$('#wrapper').fadeIn();
});
See this JSFiddle.
Like the #ITFarmer wait, you can do it in CSS3, but you could probably also animate the background-image with CSS3 too.
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeinbg {
from {
background-image: none;
}
to {
background:url('body.png') no-repeat;
}
}
.container {
animation: fadein 2s;
}
.body {
animation: fadeinbg 2s;
I'm not sure if it would also affect the background image, but you could do the fade-in effect also without jQuery. At least in browsers which support CSS3:
#keyframes fadein{
from{opacity:0;}
to{opacity:1;}
}
.someElement{
animation: fadein 2s;
}
Related
I'm using jQuery to toggle between my light theme and dark theme:
$(".theme__switch").on("click", () => {
$("body").toggleClass("light__theme dark__theme");
});
My goal is to attach a fade-in animation to both these classes.
It works for light__theme on load, and when I toggle back from dark__theme, but when I try to add the fade-in animation to my dark__theme, the animation doesn't work for either themes
I start with: <body class="light__theme">
.light__theme {
animation: fadein 2s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
which works fine, but when I try to attach the animation to my
dark__theme class like so:
.dark__theme {
--background: #121212;
--text: #f2f3f4;
background: var(--background);
// adding the animation in
animation: fadein 2s;
}
I don't get the fade-in animation, and it also removes the animation from my light theme.
The classes are being toggled correctly, I can see that when inspecting the <body> in dev tools, but I'm not sure whats causing my issue. Perhaps the way I'm calling the animation in my css?
I'd really appreciate any help on this one.. thanks for looking!
You need to add reverse to the animation for dark__theme:
.dark__theme {
--background: #121212;
--text: #f2f3f4;
background: var(--background);
// adding the animation in
animation: fadein 2s reverse;
}
Animation MDN
I want to blur the whole "body" section of my website until the page has been fully rendered.
I have a preloader set up, it consists of 2 parts ":before" which acts as a background and ":after" which acts as a foreground.
Can I achieve this with just html & css or will I need to modify the JavaScript?
*Here's a perfect "permanent" example of what I want to achieve.
But I only want it to be temporary (until the page loads).
body {
-webkit-filter: blur(20px);
filter: blur(20px);
}
My current website css:
body {
background-color: #fff;
}
.site-preloader:before {
background-color: transparent;
//I want to blur the body here somehow
}
.site-preloader:after {
background: url("/preloader-image.png") 0 0 no-repeat;
z-index: 9999;
}
Whilst it is technically possible to achieve by doing the following
Give your body a class .i.e. .loading apply a filter:blur(200px); and add a javascript snippet that removes the class on page load
document.addEventListener('DOMContentLoaded',function(){
document.body.classlist.remove('loading');
})
This isn't advised - mainly because your css,javascript and html will load at different times so you will likely get different results based on the time it takes to load in your assets.
unless of course you wrap the removal of the class in a settimeout function, but again the problem with this is you are adding unnecessary 'fake' page loading making the page seem even slower
Given the requirement. I would suggest progressive rendering of the above the fold content AKA critical with a CSS in the head section and with a link rel="stylesheet" in the body below the fold. This technique is supported by browsers, (displaying the above the fold content before all assets below the fold are redered), but will trigger html checker errors.
You can also defer the CSS of the below the fold to the bottom of the page. If you need some authority to back you on this turn to Google ...
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ...
Also note I'm strongly suggesting opacity since it uses the GPU freeing up the CPU to continue to load the rest of the page. If you blur the page will need to repeat a layout process over and over again and make the load time worse if it is animated, However Louay Madrid solution would not make it worse.
At least give the users a header with the company name and phone number and access to site navigation why these poor souls are waiting for the rest of the page so they don't think there connection died.
<head>
<style>
// above the fold css - desired in html
body {
background-color: #fff;
}
#main {
background: url( ... your image ... );
animation-name: beginPage;
animation-duration: 4s;
-webkit-animation: beginPage 5s; /* Safari 4+ */
-moz-animation: beginPage 5s; /* Fx 5+ */
-o-animation: beginPage 5s; /* Opera 12+ */
animation: beginPage 5s; /* IE 10+, Fx 29+ */
}
#-webkit-keyframes beginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes beginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes NbeginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes beginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div id="main">
Above the fold content
<link rel="stylesheet" href="below the fold.css">
Below the fold content
</div>
</body>
Your css:
body {
-webkit-filter: blur(20px);
filter: blur(20px);
}
Then add this js/jq code to your script body:
window.addEventListener('load', (event) => { $('body').css('webkit-filter', 'blur(0px)');});
So far I have a navbar with transparent background when you land on the page. After a certain threshold of scrolling, it gets the class navbar-fixed, which makes the navbar fixed and changes the appearance.
However, I would like it to have a smooth fade in and fade out effect when it appears (and when you scroll up again, disappears).
How could I achieve that? Jquery fadeIn and fadeOut does not work since it actually totally hides the navbar with the fadeOut.
<div id="nav" class="navbar-trans">
</div>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('#nav').removeClass('navbar-trans').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav').removeClass('navbar-fixed').addClass('navbar-trans');
}
});
});
</script>
Use a css transition
#nav {
transition: opacity 0.25s;
}
.navbar-fixed {
opacity: 0.75
}
.navbar-trans {
opacity: 1;
}
As #realseanp says, CSS transitions would work nicely here. However, you probably want to apply the transition to the nav's background color rather than the opacity.
#nav {
transition: background-color 0.3s ease;
background-color: rgba(255,255,255,0);
}
#nav.navbar-fixed {
background-color: rgba(255,255,255,1);
}
Here's a fiddle to demonstrate. After a 1 second timeout, the class "fixed" is applied to the nav.
I have an idea for my school project, and I've been searching online how to add this feature in css or java. I just want the title and whole menu to be hidden for around 5 or 6 seconds before appearing on the webpage. I was thinking of using a div to hide these, but I'm not 100% sure if that would work with a menu because of all of its content and links. Any advice or help is appreciated!
Here's a pure CSS example:
DEMO
<div class="content">
<div class="show-after-five">
<h1>Hey! I am here 5 seconds late</h1>
</div>
</div>
.show-after-five {
opacity: 0;
animation-name: fade-in;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.3s;
animation-delay: 3s;
animation-fill-mode: forwards;
-webkit-animation-name: fade-in;
-webkit-animation-iteration-count: infinte;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.5s;
-webkit-animation-delay: 5s;
-webkit-animation-fill-mode: forwards;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Let me know if you have any questions.
create a div with display:none style attribute, and put all your menu stuff in there that you want to hide:
<div id="mydiv" style="display:none">
...
</div>
then using jQuery on the bottom of your page:
<script>
setTimeout(function(){
$('#mydiv').fadeIn();
}, 5000);
</script>
This will execute the show method in 5000 milliseconds, or 5 seconds, and will have a nice fade in effect. This is all just based on what you described you wanted.
This is quite easy to do using Javascript (in particular, jQuery).
Place your menu on the DOM:
<div class="menu">Pretend this is a menu</div>
Set its display to none on page load:
.menu {
display: none;
}
Then set a timer when the document is ready to make it appear after 5 seconds:
$(document).ready(function() {
setTimeout(function (event) {
$('.menu').show();
}, 5000);
});
Demo: http://jsfiddle.net/3Grdd/
Yes, it's possible. And there are many ways to do so. Easiest would be jQuery mixed with CSS3.
CSS:
#target_ID{
display: none;
}
jQuery:
$(function() {
$("#target_id").delay(6000).show();
});
You can use the jQuery delay() function to accomplish this.
http://api.jquery.com/delay/
jQuery(document).ready(function ($) {
$('#menu').delay(500).removeClass('.hidden');
});
Instead of removeClass() you can use fadeIn() or any other jQuery transition function.
Some of the other answers suggest using display:none. I would be cautious because that will remove that content from the layout and potentially mess things up depending on how you have the site coded. If you have Jquery loaded, here is a way to do it.
CSS
.menu {opacity:0;}
.title {opacity:0;}
Javscript
setTimeout( function(){
$('.menu , .title').animate({ opacity:1 },3000);
}, 3000);
".menu" and ".title" are your containers. The first '3000' is the animation time of the fade in. The second '3000' is the delay. 3000 = 3 seconds. 5000 = 5 seconds, ect...
I have some CSS that scales images, which works fine.
The problem is it gets applied to every image on the page. What I want is to apply it ONLY to an image if I mouseover or onclick.
Because images are inserted by a CMS used by non-tech writers, they don't have the skills to get into the image tag itself to insert a class. This is why I want the scaling CSS triggered by mouseover or onclick.
I've struggled to get a piece of javascript to do the job and would appreciate some help
You just bind the event to the tag and use this:
var images = document.getElementsByTagName("img");
for (var i=0;i<images.length;i++) {
images[i].onmouseover = imgScale;
images[i].onclick = imgScale;
}
function imgScale(e) {
this.style.width = 500px; //whatever
this.setAttribute("class", "image-scale");
}
If jQuery:
$('img').on('hover click', function() {
$(this).css('width','500px');
$(this).addClass('image-scale');
});
Even better, if you only need on hover you can use just CSS:
img:hover {
width: 500px;
}
You could try using
img:active
To detect a click, but I believe it will only make changes while the mouse is pressed down, as soon as they let up it is no longer :active
You may try using CSS 3 for scaling. Have a look at this fiddle.
HTML:
<img src="http://lorempixel.com/200/200/sports"/>
<img src="http://lorempixel.com/200/200/nature"/>
<img src="http://lorempixel.com/200/200/city"/>
<img src="http://lorempixel.com/200/200/sports"/>
<img src="http://lorempixel.com/200/200/animals"/>
CSS:
img {
-webkit-transition: all 300ms 0ms ease-in-out;
transition: all 300ms 0ms ease-in-out;
width: 50px;
}
img:hover {
-webkit-transform: scale(1.4);
transform: scale(1.4);
}