I'm trying to change the background image using javascript. I've set the background up like this;
body {
background: black;
overflow-x: hidden;
overflow-y: hidden;
}
body:before {
overflow-x: hidden;
overflow-y: hidden;
content: "";
position: absolute;
background: url('http://www.dafont.com/forum/attach/orig/1/6/166803.jpg');
background-size: cover;
z-index: -1; /* Keep the background behind the content */
height: 100%; width: 100%; /* Using Glen Maddern's trick /via #mente */
transform: scale(1);
filter: blur(13px);
}
I'm using the above CSS to create a background image with a blur that does not affect elements placed above it. This works. My issue is I would like to change the background image at random intervals. I am unable to do so. I have used;
document.body.style.backgroundImage
$('body').css( 'background-image', artUrl );
document.getElementById('body')
All have failed, I think the issue maybe due to the fact the image is set in body:before. Is there anyway to change the background image using javascript and still be able to have a blur without effecting elements above it? Any help would be appreciated.
You are correct that it has something to do with the pseudo element. Unfortunately there isn't a way to manipulate this with JavaScript. You could, however, use JavaScript to create a style tag that would have a higher specificity.
var css = 'body:before { background: url(\'dblogo_150.png\') }';
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
You can just create new classes with attached pseudo elements to do this, and use Javascript to switch between them. For example your CSS might look like:
.background--first:before {
background: url(first.jpg);
}
.background--second:before {
background: url(second.jpg);
}
.background--third:before {
background: url(third.jpg);
}
Use a separate element that you'll blur;
don't use body neither body:before or :after, why complicate, right?!
Use several child elements, hide all but first, set a transition and a .show in CSS, handle (actually toggle) that class using JS (jQuery in our case)
/**
* BACKGROUND FADER
*/
(function(){
var $slides = $("#background").children(),
tot = $slides.length, // how many slides
c = 0, // simple counter
itv;
function anim() {
c = ++c % tot; // c = random? Do what you like
$slides.removeClass("show").eq( c ).addClass("show");
}
itv = setInterval(anim, 3000); // Start loop!
}());
/*QuickReset*/ *{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
body{
color:#fff;
background: black;
}
#background{
position: fixed;
top:0; left:0;
height: 100%; width: 100%;
z-index: -999;
filter: blur(10px);
overflow:hidden;
}
#background > div{
position: absolute;
top:0; left:0;
height: 100%; width: 100%;
background: none 50% / cover;
transition: 1s; -webkit-transition: 1s;
}
#background > div + div{ /* all but first one */
opacity: 0;
}
#background > div.show{ /* class handled by jQuery */
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background">
<div style="background-image:url(http://placehold.it/800x600/0bf/fff?text=0);"></div>
<div style="background-image:url(http://placehold.it/800x600/f0b/fff?text=1);"></div>
<div style="background-image:url(http://placehold.it/800x600/0fb/fff?text=2);"></div>
</div>
<!-- put other page content here. -->
<h1>Hello world</h1>
Edited : There is no way to select the pseudo element, but you can add style to the page like this:
try change this:
$('body').css( 'background-image', artUrl );
To
$('body').append('<style>body:before{background: url(' + src + ')}</style>');
The style appends to the page will override the one in css file.
var src = 'https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif';
$('body').append('<style>body:before{background: url(' + src + ')}</style>');
body {
background: black;
overflow-x: hidden;
overflow-y: hidden;
}
body:before {
overflow-x: hidden;
overflow-y: hidden;
content: "";
position: absolute;
background: url('https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg');
background-size: cover;
z-index: -1;
height: 100%; width: 100%;
transform: scale(1);
filter: blur(13px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<head></head>
<body></body>
</html>
Related
I am trying to make a div expand smoothly to fullscreen when clicked. The final product I am going for is similar to when a user clicks a case study on this website https://infinum.co/
So far my code can make the div fullscreen but it jumps because of the position fixed I add. I am not bothered whether the actual animation is handled by CSS or JavaScript/jQuery.
$(function() {
$(".block").on("click", function() {
$(this).addClass("fullscreen");
});
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.block {
width: 50%;
margin: 0 auto 50px auto;
height: 300px;
background-color: red;
transition: all 0.5s linear;
}
.block.fullscreen {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>
All I have so far can be found on this pen: http://codepen.io/anon/pen/RKGeYj
make your #block fullscreen first and then apply the position:absolute; after a delay greater than the fullscreen animation speed.
Here's a working snippet.
var isFullscreen = false;
$("#block").click(function (){
var prop = {};
var speed = 910;
if(!isFullscreen){ // MAXIMIZATION
prop.width = "100%";
prop.height = "100vh";
isFullscreen = true;
$("#block").animate(prop,speed);
setTimeout(function() {
$("#block").css("position","absolute");
}, 920);
}
else{
prop.width = "50%";
prop.height = "250px";
isFullscreen = false;
$("#block").animate(prop,speed);
setTimeout(function() {
$("#block").css("position","relative");
}, 920);
}
});
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
#block,#blockTwo{
width:50%;
height:250px;
margin:0 auto;
background-color: red;
}
#block{
z-index:100;
}
#blockTwo{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block"></div>
<div id="blockTwo"></div>
Checkout http://usefulangle.com/post/38/animating-lightbox-with-css-javascript .It contains the animation that you're looking for.
When you're making the position as fixed, you should give the initial top & left properties as well. You can get the initial top & left properties using the getBoundingClientRect method.
Along with animating top & left, you should animate width & height as well for a smoother look.
.in-animation {
animation: inlightbox 0.8s forwards;
position: fixed !important;
}
#keyframes inlightbox
{
50% {
width: 100%;
left: 0;
height: 200px;
}
100% {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
}
I tried a different approach. I used added and removed classlists using a Javascript onclick function. To make so that the image only took the full pages size rather than spreading downward if there was text or contents at the top of page above the image, I put those images in a div and used classlists there too to remove or to add these areas if the picture expanded. For this to work, you will need to stretch your image. If this fits your website, try the following code:
<html>
<head>
<style>
.image {
margin: 0px;
transition: all 0.5s linear;
background-image: url('https://tse2.mm.bing.net/th?id=OIP.4_3Eev4xNVvGA5aRvaevLAHaJa&pid=Api&P=0&w=300&h=300');
background-repeat: no-repeat;
}
.image.small {
width: 200px;
height: 100px;
background-size: cover;
background-size: 100% 100%;
}
.image.fullScreen {
width: 100%;
height: 100%;
background-size: cover;
background-size: 100% 100%;
}
.topContent {
display: contents;
}
.bottomContent {
display: contents;
}
.topContent.remove {
display: none;
}
.bottomContent.remove {
display: none;
}
</style>
</head>
<body>
<div class="topContent">
<h1>Hello</h1>
</div>
<div class="image" onclick="imageChange()"></div>
<div class="bottomContent">
<h1>Hello</h1>
</div>
<script>
window.onload = function() {
document.querySelector('.image').classList.add('small')
}
function imageChange() {
if (document.querySelector('.image').classList.contains('small')) {
document.querySelector('.image').classList.remove('small')
document.querySelector('.image').classList.add('fullScreen')
document.querySelector('.topContent').classList.add('remove')
document.querySelector('.bottomContent').classList.add('remove')
} else {
document.querySelector('.topContent').classList.remove('remove')
document.querySelector('.bottomContent').classList.remove('remove')
document.querySelector('.image').classList.remove('fullScreen')
document.querySelector('.image').classList.add('small')
}
}
</script>
</body>
</html>
If you want the image to stretch all the way to the very edge, that should be very possible. Also, with classlists, you could even turn the background black creating a black border.
I don't have experience with svg and animations, I have the following file jsfiddle which i want to animate the fill path color.
I want to use it as a loader so the new colour should fill the path like Sliding across or something similiar that gives it a look of "loading". You can use any color it's just an example...
Thank you
I know it's not fully the way you want to do it, but view this link:
http://cdn.tinfishcreativedev.eu/eyeLoad/
It has a VERY simple implementation (quite crude at the minute, but just to get you started).
The code in the HTML file is as follows:
<style>
body{
background:#F3F5F6;
text-align: center;
}
.loader{
background: #000;
display: inline-block;
position: relative;
height:63px;
width:100px;
margin-top:300px;
}
.loader img{
display: block;
position: absolute;
top: 0;
left: 0;
z-index:2;
}
.loaderBar{
background: #16C38B;
width: 0;
position: relative;
z-index: 1;
height:100%;
-webkit-animation:grow 2s infinite linear;
}
#-webkit-keyframes grow{
0%{ width:0; }
100%{ width: 100%; }
}
</style>
<div class="loader">
<img src="eye.png" width="100" />
<div class="loaderBar">
</div>
You could even do it with JS instead of keyframes to get it working on the older browsers like IE8 if needed.
i am looking for this kind of template . Moving the page to left and then page to right. Can anyone tell me how can i make this or is there any javascript example similar to this.
Create two <div>s, put them next to each other, make them take up the whole window, and change them as needed.
HTML:
<div class="left">left</div>
<div class="right">right</div>
CSS:
body {
margin: 0;
}
.left {
background-color: green;
bottom: 0;
left: 0;
position: fixed;
top: 0;
transition: width 1s;
width: 0;
}
.left.active {
width: 200px;
}
.right {
background-color: red;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: left 1s;
}
.right.active {
left: 200px;
}
JS (width jQuery):
$('.right').on('click', function() {
$('.left').toggleClass('active');
$('.right').toggleClass('active');
});
And here's a fiddle.
Using .toggle(effect,options,duration) method to moving the page to left to right.
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'right' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('#Id').toggle(effect, options, duration);
Taken via this link
If you want it to animate smooth on all devices you should use css transitions and transforms. Hiding and showing would be as basic as toggling a class then.
The example in jsfiddle
<style media="screen">
.wrapper {
width: 100%;
overflow: hidden;
}
.menu {
height: 100vh;
width: 100px;
background: #ABC;
color: white;
position: absolute;
left:0;
transition: transform 0.3s;
transform: translateX(-100px);
}
.content {
transition: transform 0.3s;
}
.active .menu {
transform: translateX(0);
}
.active .content {
transform: translateX(100px);
}
</style>
<button class="toggle">Toggle</button>
<div class="wrapper">
<div class="menu">
My menu
</div>
<div class="content">
My content
</div>
</div>
<script type="text/javascript">
document.querySelector('.toggle').addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('.wrapper').classList.toggle("active");
});
</script>
NB! Supported from IE10. IE 9 will support without the animation and you probably should add the needed -ms-, -webkit-, -moz-, etc prefixes to support the older browsers if needed for transition and transform properties.
Also I advise not animating body or html with this method and put the content of page in the wrapper (in .content in the examples case). Moving body and html directly may lead to unpleasant surprises later.
I'm using the background-blend-mode on this:
<a href="#" class="blend">
<h3>Title</h3>
<p>Content goes here</p>
</a>
It has a url set for the background-image. When .blend is hovered over, it changes the background to this:
.blend:hover {
background-blend-mode:multiply;
background-color: rgba(0,0,0,.6);
}
So it works, but not in IE (of course). What alternatives are there? Is there some sort of jQuery trick that I can use to get it to work in IE? Or is there a prefix I could use, say -ms- or something similar?
Not the best solution I know, but as IE and MS Edge can't use background-blend-mode (http://caniuse.com/#feat=css-backgroundblendmode).
I get around this by adding a :after class to the element and manipulating that via background-colour and playing with the opacity on the pseudo element.
DEMO
https://codepen.io/nicekiwi/pen/PmZdMK
HTML
<div class="blend"></div>
CSS
.blend {
background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg');
background-repeat: no-repeat;
background-attachment: cover;
width: 200px;
height: 200px;
position: relative;
}
.blend:after {
width: 100%;
height: 100%;
content: '';
background-color: red;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s; /* lets transition to be fancy ^_^ */
}
.blend:hover:after {
opacity: 0.3;
}
I wish to use JavaScript to apply the style given below to the body of the HTML or another div on mouseover. And reverse on mouseout. Both with a fade if possible?
Style:
.box-style_img2 {
background-image: url(img.png);
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
}
Thanks in advance.
P.S. Just beginning to learn Javascript.
It is always better to do things in CSS if you can avoid Javascript
Try using :hover property of css. For animation use transition property
<div class="box-style_img2">
</div>
.box-style_img2 {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
transition: all 1s ease;
}
.box-style_img2:hover {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #000000;
transition: all 1s ease;
}
Also you can check this fiddle
function on_mouseover(){
document.body.className += "your-class-to be applied";//for body
or
document.getElementById("div-id").className ="your-class-to be applied"
}
function on_mouseout(){
document.body.className += "your-initial-css-class";//for body
or
document.getElementById("div-id").className ="your-initial-css-class";
}
Your HTML:
<div id="div-id" onmouseover="on_mouseover()" onmouseout="on_mouseout()"></div>
Or you can use addEventListener if you dont want to write javascript inline
document.getElementById('your-id').addEventListener("mouseover",on_mouseover);
document.getElementById('your-id').addEventListener("mouseout",on_mouseout);
Note:This task can also be done using plain css also.
.your-class{
//properties to be applied on mouseout
}
.your-class:hover{
//properties to be applied on mouseover
}