Parallax scroll effect with video - javascript

I'm learning about the parallax effects and I'm trying to display a video in background instead of an image.
So, I created a good effect using a background image.
This is my jQuery code:
$('[data-parallax]').each(function(){
var $this = $(this),
$window = $(window);
$window.scroll(function() {
var y = -($window.scrollTop() / $this.data('speed')),
background = '50% '+ y + 'px';
$this.css('background-position', background);
});
});
And my CSS:
[data-parallax] {
background-attachment: fixed;
background-color: #fff;
background-image: url('http://lorempixel.com/720/480');
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
position: relative;
}
Example: http://jsfiddle.net/7a2ky/show/
Code: http://jsfiddle.net/7a2ky/
I'd like to do the same effect but using a video (http://goo.gl/HcH2cL) instead of an image. Is it possible?

You cant change a background image into a video in CSS,
you need to trick the browser with the zIndex (or use a gif file instead of the video) :
$video.css({"height":"100%",
position:'absolute',
top:0,left:0,zIndex:10
});
http://jsfiddle.net/camus/7a2ky/9/show/

js
$(window).scroll(function ()
{
var yPos=-($(window).scrollTop() / 6);
if($(window).scrollTop()>100)
{
document.getElementById("div1_wrapper").style.backgroundPosition="100% "+yPos+"px";
}
if($(window).scrollTop()<100)
{
document.getElementById("div1_wrapper").style.backgroundPosition="100% 100%";
}
});
css
#div1_wrapper
{
background:url("images/parallax1.jpg") no-repeat;
background-attachment:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
}
#div2_wrapper
{
background:url("images/parallax2.jpg") no-repeat;
background-attachment:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
width:100%;
}
if you need to view complete tutorial with demo http://talkerscode.com/webtricks/simple-parallax-effect-on-scrolling-using-jquery-and-css.php

Related

CSS How to keep the section filled with a background image after the position transform

I wanna keep the section filled with a background image after the position transform.
Using this code I get a white background from the body element.
<section><div class="firstpage"></div></section>
.firstpage{
position: absolute;
background-image:url('https://i.ibb.co/HGSY9Rv/bcb.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height:100%;
width:100%;
}
$(".firstpage").mouseenter(function(){
$(".firstpage").animate({
'background-position-x': '-200px',
});});
$(".firstpage").mouseleave(function(){
$(".firstpage").animate({
'background-position-x': '0px',
});});
https://codepen.io/gamegame/pen/NWMpJvy
make the bg image bigger in the width by using a calculation
the calculation is created by using native CSS calc()/var()
basically, we add the length of the animation to the width
so it will always overflow,
and this is correct since we have a calc() (so it is responsive)
so the animation works fine always bigger and smaller display
100% + 200px
(let's say if the width of your device is 550px, now this calcolation will be 550 + 200 = 750)
and there isn't any need for javascript for animation
because with :hover we can do the same / and transition
code example:
body {
margin: 0;
overflow:hidden; /* for not see the scrollbar */
}
.firstpage {
--x: 200px;
position: absolute;
background-image: url("https://i.ibb.co/HGSY9Rv/bcb.png");
/* not use `attachment: fixed` here */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: calc(100% + var(--x));
transition: background-position-x 0.5s ease-in-out;
}
.firstpage:hover {
background-position-x: calc(var(--x) * -1); /* 200px * -1 = -200px */
}
<section>
<div class="firstpage"></div>
</section>

Javascript Random Image Losing Styling

trying to set up random background images for my Jumbotron. Here is what I have so far.
function randomImage() {
var images = [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZwkTaJg28-Bxidgfm6FbHyEZ8D5ya1hGMroF05htuwvQqJsY9sQ",
"http://www.shunvmall.com/data/out/193/47120931-random-image.png",
"https://s-media-cache-ak0.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg"
];
var imgAmount = images.length
console.log(imgAmount);
var x = Math.floor(imgAmount * Math.random())
console.log(x);
document.getElementsByClassName('jumbotron')[0].style.background = "url(" + images[x] + ") no-repeat center center fixed";
}
window.onload = randomImage;
This works however on page load the styles defined in my css sheet seem to be overwritten?
.container .jumbotron {
background: url(/static/images/banner-1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
border-radius: 0px;
}
Is there a way to load these random images and keep the other styles already defined?
Also, another quick question.. I used getElementsByClassName[0] only because I couldn't get querySelector to work. How would I have written this with querySelector?
Changing the style.background property using JavaScript resets all the background properties (including background-size as well). You might only want to alter the backgroundImage property using JavaScript to keep the other background styles defined in your CSS.
document.querySelector('.jumbotron').style.backgroundImage = 'url(...)';
function randomImage() {
var images = [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZwkTaJg28-Bxidgfm6FbHyEZ8D5ya1hGMroF05htuwvQqJsY9sQ",
"http://www.shunvmall.com/data/out/193/47120931-random-image.png",
"https://s-media-cache-ak0.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg"
];
var imgAmount = images.length;
var x = Math.floor(imgAmount * Math.random());
document.querySelector('.jumbotron').style.backgroundImage = "url(" + images[x] + ")";
}
window.onload = randomImage;
.container .jumbotron {
background: url(https://placehold.it/300x200) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0px;
border-radius: 0px;
height: 200px;
border: 6px #000 solid;
}
<div class="container">
<div class="jumbotron">
</div>
</div>

Background cover while page resize

My page has some animations that sometimes change the page height (on purpose), so initialy when the page is loaded and page height is 100%, the background image covers the page.
But when it runs the animations, the page height can go beyond 100%. The only way to effectively cover all the background is to change background height from auto to a bigger value (e.g. 200%), but doing so i am also changing the page height. In other words, is it possible to cover (dynamically) the page when the animations are running while keeping page height at 100% when animations are not running?
my css code for the background:
background: url(background2.jpg)repeat 5% 5%;
position: absolute;
background-size:cover;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 400;
height: auto;
width: auto;
$(document).ready(function(){
var isAnimating = $("#someid").is(':animated');
//will return true if selected element animating
if(isAnimating == true){
$('#div').css('height','value');
}
else{
$('#div').css('height','value');
}
});
background: url('') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.6;
filter: alpha(opacity=60);/* For IE8 and earlier */
width: 100%;
height: 100%;
overflow: hidden;
hi friends apply this css

Resize Background Image according to browser height

How does one accomplish a hero-unit similar to this: http://tribalmedia.co.uk/
I'm curious more than anything as to how this was created. As far I can tell it's more than likely some JS that's applying a min-height percentage value to the class depending on browser height.
EDIT: Try resizing your browser height and you'll see the min-height property is being changed.
Any input would be greatly appreciated!
Just read the CSS:
.site-header {
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFF;
min-height: 618px;
position: relative;
}
Demo: http://jsfiddle.net/qwertynl/5a343/
it's just the css stuff.Following is the CSS used by the particular website.
.site-header {
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFFFFF;
min-height: 618px;
position: relative;
}
I was able to solve my question using this Javascript!
function resizeHero() {
var windowHeight = $(window).height(),
heroUnit = $(".hero-unit");
heroUnit.css({
minHeight: windowHeight
});
}
$(document).ready(function() {
resizeHero();
$(window).on("resize", resizeHero);
});

How To Make Full Page Background Image Without Resizing Or Cropping

What I need is what the following site does exactly but it's not a slideshow it's just a fading background image :
http://www.stevenharrisarchitects.com/
The image is 100% in width and 100% in height so no Cropping occurs, and this is what I want exactly.I had managed to do this part very easily with the following codes :
#bg-stat {
background: url('images/LANDING_PAGE.jpg') no-repeat center center fixed;
height: 100%;
background-size: 100% 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/LANDING_PAGE.jpg', sizingMethod='scale')";
}
I made the background-size : 100% 100% ;
It works fine, but the only problem that's left is that my client doesn't want the image to resize with the size of the window, instead it should act like on the site I mentioned above (Try resizing the window and you will see what I mean).
I don't want my background image to re-size to the 100% of width and height of my window, I want it to act just like in the above link I shared.
Also a link to my site :
http://leydenlewis.com/
Any help would be much appreciated.
If you need to use the background property and never want the image to be cropped, you should use background-size :contain;
div.big_background{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url('http://placekitten.com/g/1200/800') no-repeat center top;
background-size :contain;
}
Answer based on problem described above:
#bg-stat {
width: 100%;
height: 100%;
background: url('images/LANDING_PAGE.jpg') no-repeat scroll 0 0 transparent;
background-size: 100% auto;
}
Answer based on feedback:
CSS:
#bg-stat {
width: 100%;
height: 100%;
}
#bg-image {
background: url("images/LANDING_PAGE.jpg") no-repeat scroll 0 0 transparent;
height: 100%;
width: 100%
min-width: 1140px; // Based on img dimensions or arbitrary
max-height: 735px; // Based on img dimensions or arbitrary
}
i think you need below code:
body
{
background: url(image/background.jpg);
background-attachment: fixed;
background-size: cover;
}

Categories