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
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%;
}
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!
Could someone please explain me how I can make this div responsive using media queries? It's practically a 200px high div with sponsor logos on it. I want it to be responsive. Currently the logo's are displayed horizontally but for example, they should be stacking one on top of the other on the mobile version.
<div id="sponsors">
<a id="about" class="smooth"></a>
<div class="sponsors">
<div class="row row-centered">
<div class="col-md-4 col-centered" style="margin-top: 40px; ">
<img src="img/bridgestone.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;";>
</div>
<div class="col-md-4 col-centered" style="margin-top: 40px;">
<img src="img/sparco1.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;">
</div>
<div class="col-md-4 col-centered" style="margin-top: 10px;">
<img src="img/redbull.png" class="hvr-pulse" style=" width: 300px; margin-bottom: 20px;">
</div>
</div>
</div>
</div>
#sponsors {
width: 100%;
height: 200px;
background-color: black;
background-repeat: no-repeat;
background-size: cover;
}
Change your sponsors height to min-height like this:
#sponsors {
width: 100%;
min-height: 200px;
}
Link to jsFiddle: https://jsfiddle.net/AndrewL32/e0d8my79/97/ [Dummy images use]
P.s. as you might have noticed in the fiddle, the inline margins are removed because you can achieve what you want by adding some padding to the box wrapping the images.
You'll need to add a meta tag to identify the width and media queries to perform an action when the width is different. It would also be very helpful to add percentage onto your css elements rather than pixels.
HTML:
<!doctype html>
<meta name="viewport" content="width=device-width"/>
CSS:
#media screen and (min-width:761px){
div.sponsers{
background-color:black;
background-repeat: no-repeat;
background-size: cover;
}
}
A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.
There is one good website as well https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
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 am trying to make a responsive site using skel.js and skel-panels.js. Basically what these libraries do is allow you to make breakpoints for the screen size and allow you to put content in hidden panels when the screen size changes.
I have an image covering the background of a container div. The problem I am having is that when I try to change the size of the screen, the background image does not "include" the new element that is inserted via skel-panels.js, therefore becoming smaller than I want it to be.
My markup:
<div id="intro">
<!-- Nav -->
<div>
<nav id="nav">
Home
About
Blog
Contact
</nav>
</div>
<div class="container">
<!-- Header -->
<div id="header">
<h1 id="title">Title</h1>
<img id="logo" src="images/logo.png">
</div>
<div>
<section id="hero">
<h2>Title</h2>
<p>Catchphrase!</p>
Join the Fight
</section>
</div>
</div>
</div>
My CSS:
#intro {
background:url(../images/bg.png) top center no-repeat fixed;
position: relative;
background-size: cover;
text-align: center;
color: #fff;
}
This is what this looks like:
Fullwidth - [1]: http://i.imgur.com/pFpcn3m.jpg
Narrow View - [2]: http://i.imgur.com/ZIA3nMt.jpg
It looks like the markup gets messed up when a new div is inserted (nav button in the narrow view). Any insights would be greatly appreciated.
try
#intro {
background: url(../images/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}