I'm trying to create the effect seen in the header of http://anagram.paris/work/burgerking where the text moves as you scroll down.
I'm trying to do it with css margins and jQuery, but it doesn't seem to act right. I am using flex to vertically center all the content so I think that may be affecting it too.
jQuery(document).ready(function($){
var offset = 175,
scroll_top_duration = 1500,
// bind with the button link
$animation = $('.spacer');
$(window).scroll(function(){
if( $(this).scrollTop() > offset ) {
$animation.addClass('stretch');
}
else
{
$animation.removeClass('stretch');
}
});
css
.flex {
display: -webkit-flex;
display: flex;
flex: 1;
align-items: center;
}
.spacer.stretch { padding-top: 4%; }
.spacer {
position: relative;
transition: padding .35s 0s ease;
}
html
<div class="jumbotron indx-jumbotron flex">
<div class="row flex">
<div class="col-xs-8 col-xs-offset-2">
<h1 class="spacer">Hi, I'm <strong>Lucas</strong></h1>
<p class="spacer">Lorem ipsum dolor sit amet,</p>
<div class="spacer">Button</div>
</div>
</div>
this is simple parallax effect
At first, margin is not a good property to do that (performance issue) better is transform: translate3D(0px,0px,0px) -> translate3D(0px,-100px,0px)
If you want to, I can write more, how translate3D works.
But if you want to ready to use solution look at here
http://scrollmagic.io/
If you want to now more about performance
https://developers.google.com/web/fundamentals/performance/rendering/
I had to pretty much overhall the code, but this works properly. To adjust the speed simply adjust the multiplier from .5 to whatever you want.
jQuery(document).ready(function($){
$(window).scroll(function(){
$(".container .foreground").css({
top:$(".container").height()/2-$(this).scrollTop()*.5
});
});
});
body {
padding:0;
margin:0;
}
.container {
position:relative;
overflow:hidden;
}
.container .background {
width:100%;
height:100%;
display:block;
}
.container .foreground {
position:absolute;
font-size:40px;
color:yellow;
z-index:1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spacer {
height:400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img class="background" src="http://neil.computer/s/1.jpg" />
<div class="foreground">
Testing text
</div>
</div>
<div class="spacer">
</div>
Related
I am not good at English, so I ask questions using a translator.
I'm sorry.
I use the ScrollMagic library
Created a Mobile Page.
For ScrollMagic to work
html, body's height should be 100%.
Content Inside has an Iframe.
The Position property of the parent DIV of the Iframe is Fixed.
PC: Put your cursor over the iframe, scroll, scroll, and you won't scroll.
Mobile: Put your cursor on the Iframe and touchMove, you can't scroll.
If I scroll "iFrame,"
I want to scroll ".a, .b" instead.
Below is an example source
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="b">
BOTTOM
</div>
<div class="item">
<iframe src="https://fr.wikipedia.org/wiki/Main_Page" scrolling="no"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.a, .b {
width: 100%;
position:relative;
z-index:2;
}
.a {
background-color: red;
height:120%;
}
.b {
background-color: blue;
height:50%;
bottom:0px;
}
.item {
width:100%;
height:100px;
top:20%;
position:fixed;
z-index:3;
}
.item iframe {
width:100%;
height: 100px;
}
jsfiddle.net
Setting the IFRAM's property to "pointer-events: none" will work.
But click should be possible in the IFRAM,
So I'm looking for another way.
If you have any good information, please let me know.
Hello i have found a nice javascript effect of box in
link 1
link 2
But it's for wordpress only.
Is it possible to make same slide box with Bootstrap and javascript/jquery?
This is a very simple example of recreating the slide down effect on the links you posted. It can be done fairly easily just using html and css.
<div tabindex="1" class="mainbox">
<h1>
This is a box with hidden content
</h1>
</div>
<div class="hidden">
<h2>
I am no longer hidden
</h2>
</div>
div {
width:500px;
height:200px;
background:#3c3c3c;
color:black;
}
.mainbox {
cursor:pointer;
position:relative;
z-index:1;
}
.mainbox:hover {
outline:none;
}
.hidden {
position:absolute;
top:0;
z-index:-1;
opacity:0.75;
-webkit-transition:top 1s;
-moz-transition:top 1s;
}
.mainbox:hover + .hidden {
top:200px;
-webkit-transition:top 1s;
}
https://jsfiddle.net/tz3vjLg7/
Try this; with this approach you can move the main container to any place you want, add margins, paddings, etc to main-container without having to also re position the sliding panels inside
.main-container {
position: relative;
margin-left: 50px;
}
.main-panel {
position: absolute;
width: 250px;
height: 150px;
background-color: lightgrey;
z-index: 1
}
.slide-panel {
position: absolute;
width: 250px;
height: 150px;
background-color: blue;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.main-container:hover .slide-panel {
opacity: 1;
transform: translateY(150px)
}
<div class="main-container">
<div class="main-panel"></div>
<div class="slide-panel">Slide Panel</div>
</div>
I have three different boxes in same row. I want transition in those boxes when clicked inside the box.
Right now when i click on any box it will expand from left to right and get full width and other boxes are stacked in next row. What i want is when i click red box the that box must expand from left to right overlapping the remaining boxes.
Similarly when i click the green box, it must expand from both its side and overlap both boxes in left and right side and get full width. Similarly when i click blue box it must expand from left side and fill the width overlapping the remaining boxes.
Can any one please help me?
My Code is :
<html>
<head>
<title>Transition</title>
<style type="text/css">
.box {
width:30%;
height: 200px;
margin: 10px;
float:left;
}
#first {
background-color: red;
}
#second {
background-color: green;
}
#third {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$("#"+id).animate({width: "100%"});
});
});
</script>
</body>
</html>
Jsfiddle link
Transition transform: scale(), and that will allow the element to expand over the others. You can just assign a class via js for that property to transition and you can do that in pure CSS. And since each element is 20% wide, transitioning scaleX(5) would be 100%. And use transform-origin to change which direction the elements expand from.
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).addClass('scale');
});
.box {
width:20%;
height: 200px;
margin: 10px;
float:left;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: center center;
}
#third {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
transform: scaleX(5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
Though this effect would work a lot better if the elements were evenly spaced within the parent, then they will overlap and fill the parent evenly. Using display: flex; justify-content: space-between; on the parent enables that.
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).addClass('scale');
});
.container {
display: flex;
justify-content: space-between;
}
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: center center;
}
#third {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
transform: scaleX(5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
what I'm trying to do is simple to tell. There is fixed div on my page on bottom. It must be always shown on bottom, so position fixed is used.
In this div there are 2divs, one small must be always on top of this fixed div, another must be scrollable.
The problem is small div, if I give him position fixed, it is position to top of window, not on top of this fixed div, as you can see in this fiddle
If small div is position absolute, it is on top of fixed div, but if it is scrolled, as you can see in this fiddle
HTML
<div class="bottom">
<div class="top"></div>
<div class="content"></div>
</div>
CSS
.bottom
{
padding:20px;
height: 253px;
position: fixed;
bottom:0px;
width:100%;
background-color: red;
overflow-x: hidden;
overflow-y: scroll;
}
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
top: 0px;
}
.content
{
height: 1500px;
background: linear-gradient(green, blue);
}
Is is possible to make this work without watching scrolling by jvascript? By pure CSS?
You can use a wrapper <div> for the content and let it scroll - so that the absolutely positioned sibling does not scroll along with it, as follows:
HTML
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
CSS
.contentWrap{
height:100%;
overflow-y:auto;
}
* {
margin: 0;
padding: 0;
}
.bottom {
padding: 20px;
height: 253px;
position: fixed;
bottom: 0px;
width: 100%;
background-color: red;
overflow: hidden;
}
.top {
height: 50px;
width: 100%;
background-color: yellow;
position: absolute;
top: 0px;
}
.contentWrap {
height: 100%;
padding-top: 30px; /* .top height - .bottom padding*/
overflow-y: auto;
}
.content {
height: 1500px;
background: linear-gradient(green, blue);
}
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
JSFiddle Demo
Your approach using fixed -> absolute is absolutely correct since you can position an element absolute but relative to its parent by doing so. The problem is that the absolute .top always appears on top of .bottom - so if .bottom is scrolled, .top will follow.
My solution would be using position:fixed; on .top, but using bottom instead of top:
.top {
....
position:fixed;
bottom:253px; /*note sure how it should look at the end, try it yourself*/
}
Add div with class top inside div with class content and remove top:0 from .top class:
html
<div class="bottom">
<div class="content" >
<div class="top"></div>
</div>
<div>
css
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
}
fiddle
Try this, it basically just puts a frame container around your scrollable div to keep everything in place. JSFiddle
<div class="bottom">
<div class="top"></div>
<div class="scroll-container">
<div class="content" ></div>
</div>
<div>
.scroll-container
{
height: 203px;
overflow-y: scroll;
}
Also, remove overflow-y: scroll; from the .bottom class
If you already dealing with fixed heights & positions, why not just position the 'top' section as fixed as well? check the Fiddle Demo
like so:
.top
{
height:50px;
bottom:243px;
width:100%;
background-color: yellow;
position: fixed;
}
At my Page there are tow sections, a header div and the contents div. I want JS or jquery solution to stick the header section at the top, so that when user scrolls the contents section would cross and cover the header section.
html:
<div id="header">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
http://jsfiddle.net/KNh46/
Update: misunderstood, so you want the content to scroll over the header, not under. Then it should be like:
#header {
position: fixed;
height: 100px;
top: 0;
z-index: 100;
}
#content {
position: relative;
margin-top: 100px;
z-index: 101;
}
See an example here: http://jsfiddle.net/aorcsik/v7zav/
If your header is fixed height, say 100px, then:
#header {
position: fixed;
height: 100px;
top: 0;
}
#content {
margin-top: 100px;
}
This way when scrolled to the top, the header won't overlay the content, but when you start to scroll down, it will.
Something like this, if I understand your question:
<div id="content_wrapper" style="position:relative">
<div id="header" style="z-index:1; position:absolute; top:0px">
<h3>I'd like to stick here at the background, please! </h3>
</div>
<div id="content" style="z-index:5">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
</div>
I'm using https://github.com/bigspotteddog/ScrollToFixed on my projects with no problems. ScrollToFixed allows you to set when the div will be fixed based on the scroll position.
fiddle with example: jsfiddle.net/ZczEt/167/
you should add css:
*{margin:0;padding:0}
#header{
position:fixed;
width:100%;
height:200px;
background:#ccc;
}
h3{
text-align:center;
}
#content{
background:#f1f1f1;
padding-top:200px;
min-height:500px;
}
jsfiddle
I myself came with another solution :
add another container div to the header and then position that div to fixed, and make the contents to be absolute. but this way you need to specify a min-height or height for the header:
http://jsfiddle.net/pna54/
<div id="header">
<div class="container">
<h3>I'd like to stick here at the background, please! </h3>
</div>
</div>
<div id="content">
<h3>I'd like to cross over the header when user scrolls.</h3>
</div>
css:
div{margin:0;padding:0}
h3{
padding:0;margin:0;
padding-top: 100px;
padding-bottom:100px;
text-align:center;
}
#header{
background:#ccc;
min-height:200px;
width:500px;
position:relative;
}
.container{
position:fixed;
width:100%;
max-width:500px;
}
#content{
background:#f1f1f1;
min-height: 500px;
position: absolute;
width:500px;
}
http://jsfiddle.net/pna54/