I created a slideshow in my home section, here it is:
$(document).ready(function(){
var count = 0;
//replace these images with external ones to test
var images = ["http://anamarcela.info/imgs/bg2.jpg",
"http://4.bp.blogspot.com/_N_mOB63qPaE/TTSdf7e6YAI/AAAAAAAARsU/YuG9YakI-VI/s1600/3d-wallpaper-Nature.jpg",
"http://m.jinjianginns.com/images/1.png",
"http://onepage.owenforsyth.com/1page/wp-content/uploads/2016/03/bg3.jpg"];
var image = $(".fader");
image.css("background-image","url("+images[count++]+")");
setInterval(function(){
image.fadeOut(500, function(){
image.css("background-image","url("+images[count++]+")");
image.fadeIn(500);
});
if(count == images.length)
{
count = 0;
}
},4000);
});
.fader {
position: absolute;
height: 100%;
width: 100%;
left:0;
top:0;
z-index: -99;
background-repeat: no-repeat;
background-size: cover;
}
.home {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 9em 0 41em 0;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- Home --->
<div class="container-fluid home" id="home">
<section class="row">
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
<h1 class="main">urbanphenomena</h1>
<h1 class="sub-main">design+research</h1>
</div>
</section>
<div class="fader">
</div>
</div>
I want the images to crossfade, but it FadesIn and out, and that flashing between the fades is annoying. How can I make it crossfade?
Do you think the .animate() JQuery does it?
Thank you!
Related
I have some issues with particles-js, firstly, it does not cover the whole page. Secondly, I cannot interact with the particles for some reason.
This is the code for HTML:
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
And this is my css for particles-js:
#particles-js{
position : absolute;
width:100%;
height:100%;
z-index:-1;
background-image: url(gfx/testback.png);
}
[1]: https://i.stack.imgur.com/XO6w5.png
It's really easy to cover all the page with particle-js like my website: https://askianoor.ir
You should add a div with height 100
Edited Version :
<body>
<div class="h-100">
<!-- PARTICLES-->
<div id="particles-js">
<div class="position-absolute w-100">
Place your text here !
</div>
</div>
</div>
</body>
and in CSS :
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url(gfx/testback.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
because i need to give a constant width & height to my div depending on my background image size,i need to find out that.
here was many solutions for this issue....
like here:
How do I get background image size in jQuery?
here is my code
body{
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-image: url(./mybgimg.png);
}
#a{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 980px;
max-height: 680px;
background-image: url(../myImage.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<div class="container">
<div id="a">
<div >
<!-- sth that should place exactly in this div depending on what size is my #a div ... -->
</div>
</div>
</div>
</body>
</html>
how i get background image size of div with #a id ?
Hi I was using a Scrollr jquery plugin made by Alexander Prinzhorn to make a parallax effect. I made a parallax effect happen on full screen, but when I wanted it to happen on a specific div, it doesn't work. The original tutorial is made by Petr Tichy. I hope You can help me out here.
This is the code
css file
.con{
width: 500px;
height: 500px;
overflow: auto;
margin: 40px; background-color: #b3b3b3;
}
body{
padding: 0;
margin: 0;
background-color: #a3a3a3;
}
section{
height: 400px;
}
#slide-1 .bcg{
display: block;
}
#slide-2 .bcg{
display: block;
}
.bcg{
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 500px;
width: 500px;
}
These are script files I included.
<script src="path to jquery/jquery-1.9.1.min.js"></script>
<script src="path to scrollr js /skrollr.js"></script>
<script>
//initialize the scrollr function
$(document).ready( function(){
var s = skrollr.init({
forceHeight: false });
});
</script>
html file
<div class="con">
<section id="slide-1">
<div class="bcg" style="background-image: url('img1.jpg')"
data-center-top="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-anchor-target="#slide-1"
data-emit-events>
</div>
</section>
<section id="slide-2">
<div class="bcg" style="background-image: url('img2.jpg')"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-2"
data-emit-events>
</div>
</section>
</div>
i have a refference like this
http://reverzo.tymberry.com/
my code is like this
<div id="multiscroll">
<div class="ms-left">
<div id="home-left" class="ms-section slide-item full-width full-height fullscreen">
<!-- <div class="container"> -->
<p style="font-size:10em;">Lorem ipsum.</p>
<!-- </div> -->
</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
<div class="ms-right">
<div id="home-right" class="ms-section"></div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
</div>
#home-left{
background-image: url(http://www.reverzo.tymberry.com/wp-content/uploads/2014/08/furgona-home.jpg);
}
.slide-item.fullscreen {
width: 200% !important;
}
.slide-item.full-height {
height: 100%;
}
.slide-item.full-width {
/*width: 100%;*/
position: relative;
overflow: hidden;
}
.slide-item {
display: block;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
background-origin: border-box;
background-repeat: no-repeat;
}
#home-right{
background: transparent;
}
heres my work
https://jsfiddle.net/ob1k3vut/
i wanna set the home image like that. its full screen. but when i scroll. the bakground didnt split. how to do that. it can make it full screen. but when scoling they still stick together.
i cant make the fiddle because i dont know the url of js and css of multi-scroll. so sorry guys. if you gus know the link off online css and js multiscroll, feel free to tell me. ill create it so u can check it
I am using fullpage.js with background images but the issue is they are not resizing automatically on page load. They only resize to cover the background when you scale the browser, onload they look very large, cropped and pinned to the upper top. Has anyone had this issue? I am using Chrome.
<div id="fullpage">
<div class="section " id="section0">
<div id="mainTourNav" class="container">
<ul>
<li id="tourNav1"> </li>
<li id="tourNav2" class="tourNav"> Slide 1</li>
<li id="tourNav3" class="tourNav"> Slide 2 </li>
<li id="tourNav4" class="tourNav"> Slide 3 </li>
</ul>
</div>
</div>
<div class="section" id="section1">
<h1>It’s about Friends and Family. . .</h1>
<div class="section" id="section2">
<h1>It's about design. . .</h1>
</div>
<div class="section" id="section3">
<h1>It’s about the game you love. . .</h1>
</div>
</div>
The CSS
/* Backgrounds will cover all the section
* --------------------------------------- */
#section0,
#section1,
#section2,
#section3{
background-size: cover;
}
/* Defining each section background and styles
* --------------------------------------- */
#section0{
background-image: url(../img/Res-BG.jpg);
padding: 15% 0 0 0;
}
#section1{
background-image: url(../img/bg4.jpg);
padding: 10% 4% 0 4%;
}
#section2{
background-image: url(../img/bg3.jpg);
padding: 10% 4% 0 4%;
}
#section3{
background-image: url(../img/bg2.jpg);
padding: 10% 4% 0 4%;
}
#section0 h1{
color: black;
font-size: 40px;
font-style: italic;
opacity: 0;
}
#section{
background-image: url('http://www.fhdwallpapers.com/upload/2013/04/13/20130413064705-280c35c7.jpg');
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
Got it solved. Basically I chaged:
#section0,
#section1,
#section2,
#section3{
background:cover;
}
to
#section0,
#section1,
#section2,
#section3{
width:100%;
height:100%;
background-size:100% auto;
background-repeat: no-repeat;
}
Add Follwing attributes to section3
#section3{
width:100%;
height:100%;
background-size:100% auto;
background-repeat: no-repeat;
}