JsFiddle: https://jsfiddle.net/323qLz0y/
Hover over the grey box. See how when the left panel slides out, the content is squished vertically? When the transition ends, the content becomes "well-formed". How can i make the content "well-formed" while it is sliding out? Thanks.
Stack requires some code so here's the left panel portion. I tried white-space:nowrap but it forces the content onto one line which isn't what i want.
.left-panel {
width: 0px;
transition: width 1s;
float:left;
overflow: hidden;
height: 250px;
}
.left-panel-slide {
width:200px;
}
Simply give width to the p and h1 to achieve the effect you are looking for
$('.middle-panel').on('mouseover', function () {
$('.left-panel').addClass('left-panel-slide');
$('.container').addClass('container-slide');
});
$('.middle-panel').on('mouseout', function () {
$('.left-panel').removeClass('left-panel-slide');
$('.container').removeClass('container-slide');
});
.container {
position: absolute;
border: 3px blue solid;
width: 200px;
height: 250px;
left: 300px;
top:30%;
transition: width 1s, left 1s;
}
.container-slide {
width: 400px;
left:100px;
}
.middle-panel {
background:grey;
width:200px;
height: 250px;
float:left;
}
.left-panel {
width: 0px;
transition: width 1s;
float:left;
overflow: hidden;
height: 250px;
}
.left-panel p,.left-panel h1{
width:200px;
}
.left-panel-slide {
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="container">
<div class="left-panel">
<h1> Hello World! </h1>
<p>Lorem ipsum dolor sit amet, ea vero veritus eam, ad aperiri inermis consequuntur est. Id mundi accumsan eum, ius modo dicunt quaerendum ex.</p>
</div>
<div class="middle-panel"></div>
</div>
Just wrap the content that slides inside a div with a fixed width.
<div class="container">
<div class="left-panel">
<div class="content-wrapper">
<h1> Hello World! </h1>
<p>Lorem ipsum dolor sit amet, ea vero veritus eam, ad aperiri inermis consequuntur est. Id mundi accumsan eum, ius modo dicunt quaerendum ex.</p>
</div>
</div>
<div class="middle-panel"></div>
</div>
.content-wrapper {
width: 200px;
}
https://jsfiddle.net/323qLz0y/
You have to fix children's width, like this (refering to the JS fiddle HTML):
.left-panel h1, .left-panel p{
width: 200px;
}
This is all very doable without JavaScript or extra styling on the inner elements.
.container {
position: absolute;
border: 3px blue solid;
width: 200px;
height: 250px;
left: 300px;
top:30%;
transition: width 1s, left 1s;
}
.middle-panel {
background:grey;
width:200px;
height: 250px;
float:left;
}
.left-panel {
width: 180px;
padding: 10px;
transition: all 1s;
overflow: hidden;
height: 250px;
position: absolute;
left: 0;
z-index: -1;
}
.container:hover .left-panel {
left: -200px;
}
<div class="container">
<div class="left-panel">
<h1> Hello World! </h1>
<p>Lorem ipsum dolor sit amet, ea vero veritus eam, ad aperiri inermis consequuntur est. Id mundi accumsan eum, ius modo dicunt quaerendum ex.</p>
</div>
<div class="middle-panel"></div>
</div>
Fiddle demo
Related
I am trying to add the following effect in one of the divs of my website:
https://www.youtube.com/watch?v=o8DTzU0Iol8
I have done everything from the video, yet the background images of .container_page_1 .column.active .bg.bg1 2,3, and 4 don't show up even with full path and the jQuery doesn't work as well.
I am sure that the thing that causes these issues is that I've added the code from the tutorial in a div that's not directly in the body, it's in other div, that's in another div.
I will paste all the code of the page, both HTML and CSS and also link a code pen, because I do not know what part of the code is faulty...
This is a live codepen: Codepen
I've separated my website into 3 pages. I've added a parallax effect on the first page and I've tried adding the effect from the video tutorial into the second page.
I also have a reset.css file that's just too big to add here. I've found it online. Without the reset.css the codepen will have a margin at the top through which you can see the background image that should have been on .container_page_1 .column.active .bg.bg1.
What do you think ?
$(document).on('mouseover', 'container_page_1 .column', function() {
$(this).addClass('active').siblings().removeClass('active');
})
// eliminate scroll-bar
var child = document.getElementById('child-container');
child.style.right = child.clientWidth - child.offsetWidth + "px";
/* *** index.html - START *** */
body, html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
#parent-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#child-container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px; /* exact value is given through JavaScript */
overflow: auto;
scroll-snap-type: both proximity;
}
header {
height: 100%;
background-image: url("https://i.postimg.cc/V671cpsf/ps4-controller-min.jpg");
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
scroll-snap-align: center;
}
header h1 {
font-size: 32px;
font-weight: bold;
position: sticky;
top: 5%;
margin-bottom:10px;
}
header p {
position: sticky;
width: 450px;
text-align: center;
margin: auto;
margin-top: 100px;
}
.container_page_1 {
width: 100%;
height: 100vh;
/* background-color: red; */
scroll-snap-align: center;
overflow: hidden;
}
.container_page_1 .column {
width: 25%;
height: 100%;
float: left;
border-right: 2px solid rgba(0, 0, 0, 0.5);
box-sizing: border-box;
z-index: 1;
}
.container_page_1 .column:last-child {
border-right: none;
}
.container_page_1 .column .content {
position: relative;
height: 100%;
}
.container_page_1 .column .content h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
background: rgba(0, 0, 0, .1);
text-align: center;
margin: 0;
padding: 0;
color: rgba(255, 255, 255, .2);
font-size: 15em;
border-top: 2px solid rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}
.container_page_1 .column .content .box {
position: absolute;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
padding: 40px;
background: rgba(255, 255, 255, 1);
text-align: center;
transition: 0.5s;
opacity: 0;
}
.container_page_1 .column.active .content .box {
opacity: 1;
}
.container_page_1 .column .content .box h2 {
margin: 0;
padding: 0;
font-size: 30px;
color: #262626;
}
.container_page_1 .column .content .box p {
color: #262626;
font-size: 18px;
}
.container_page_1 .column .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.container_page_1 .column.active .bg.bg1 {
background: url('https://i.postimg.cc/ZRYZ24Ss/ac-odyssey-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg2 {
background: url('https://i.postimg.cc/x8h2XmbB/borderlands-3-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg3 {
background: url('https://i.postimg.cc/1RjPCkYM/god-of-war-4-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg4 {
background: url('https://i.postimg.cc/qqzrBwg8/sw-jedi-fallen-order-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_2 {
width: 100%;
height: 100%;
background-color: green;
scroll-snap-align: center;
}
/* *** index.html - END *** */
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div id="parent-container">
<div id=child-container>
<header>
<a href="#page2">
<h1 id="sticky-title">ACG - Gaming and e-Sports News</h1>
</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi debitis in libero tenetur suscipit iusto eum nulla dolorum aperiam adipisci unde veritatis vel iure, a nam, saepe exercitationem illum vitae.</p>
</header>
<div id="page2" class="container_page_1">
<div class="column active">
<div class="content">
<h1>1</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg1"></div>
</div>
<div class="column">
<div class="content">
<h1>2</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg2"></div>
</div>
<div class="column">
<div class="content">
<h1>3</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg3"></div>
</div>
<div class="column">
<div class="content">
<h1>4</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg4"></div>
</div>
</div>
<div class="container_page_2">
</div>
</div>
</div>
I have an accordion using just HTML and CSS (no JS).
For desktop, I hover over to expand, and remove the mouse to close the panel.
For mobile, I click to expand, but clicking on the same object doesn't close it. I have to click on the white space to close the panel, which isn't intuitive.
QUESTION: How can I write this code so I click on the accordion to close the panel?...is JS the only way?
HTML
<div class="slider-containers">
<!--effect #1 -->
<div class="slider-container">
<div class="flexbox-slider flexbox-slider-1">
<div class="flexbox-slide">
<div class="img-overlay"><div class="start">ENGAGE<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1464213/pexels-photo-1464213.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Engage</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
<div class="slide-bottom"></div>
</div>
<div class="flexbox-slide">
<div class="img-overlay">
<div class="start">EDUCATE<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1350615/pexels-photo-1350615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Educate</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<div class="img-overlay">
<div class="start">EMPOWER<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1093913/pexels-photo-1093913.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Empower</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
CSS
$slider-height: 500px;
$text-block-width: 400px;
$dark-font-color: #212121;
$accent-font-color: #CA9CE1;
$light-font-color: #fff;
$text-overlay-color: #000;
$text-overlay-opacity: 0.6;
$slide-overlay-color: #fff;
$slide-overlay-opacity: 0.6;
//transitions and mixins
//transitions mixin
#mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
transition-property: $property;
transition-duration: $duration;
transition-timing-function: $timing;
transition-delay: $delay;
}
//position absolute mixin
#mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
}
.container {
width: 1100px;
margin: 50px auto 0;
}
.link {
display: flex;
justify-content: center;
width: 800px;
margin: 30px auto 0;
a {
#include transition-mix;
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 40px;
color: inherit;
font: {
size: inherit;
}
text-decoration: none;
&:hover {
color: $accent-font-color;
}
&:last-child {
margin-right: 0;
}
i {
color: $accent-font-color;
margin-right: 9px;
font-size: 30px;
}
}
}
.slider-containers {
width: 100%;
margin: 60px ;
}
.slider-container {
margin-bottom: 60px;
h2 {
text-align: center;
}
}
.flexbox-slider {
margin-top: 50px;
}
.flexbox-slider {
display: flex;
width: 100%;
height: $slider-height;
visibility: hidden;
.flexbox-slide {
#include transition-mix($duration: .3s);
width: 33%;
height: 100%;
position: relative;
overflow: hidden;
cursor: pointer;
visibility: visible;
transform: skewx(-8deg);
//overlay
&:after {
#include position-absolute($top: 0, $left: 0);
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba($slide-overlay-color, $slide-overlay-opacity);
z-index: 2;
opacity: 0;
}
img {
#include position-absolute($top: 50%, $left: 50%);
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
z-index: -1;
}
.text-block {
#include position-absolute($bottom: 30px, $left: 30px);
max-width: $text-block-width;
padding: 20px;
border-radius: 5px;
background-color: rgba($text-overlay-color, $text-overlay-opacity);
color: $light-font-color;
z-index: 4;
visibility: hidden;
opacity: 0;
h3 {
font: {
size: 20px;
weight: 700;
}
}
}
}
&:hover {
.flexbox-slide:hover {
flex-shrink: 0;
width: 80%;
}
}
}
/* effect */
.flexbox-slider.flexbox-slider-1 {
.flexbox-slide {
.text-block {
bottom: 60px;
}
}
&:hover {
.start {visibility:hidden}
.flexbox-slide:hover {
.text-block {
#include transition-mix($delay: .5s);
bottom: 30px;
opacity: 1;
visibility: visible;
}
}
}
}
.start {font-weight: bold; color: #fbaf17; font-size: 150%; z-index:1000; padding: 45% 20%;
}
img.panel-img {height:500px !important; }
.img-overlay {
width: 100%;
height: 100%;
background: rgba(51,85,153,.9);
}
.flexbox-slide {border-right: dashed 4px gold;}
.flexbox-slide:last-child {border-right: 0px}
#accordion-expand, .slide-bottom {visibility: hidden}
#media (max-width:960px) {
.flexbox-slider {
flex-direction: column;
height: 200px;
.flexbox-slide {
margin: auto;
width: 75%;
height: 200px !important;
transform: skewX(0deg);
}
.flexbox-slide {border-right: none;}
}
#accordion-expand {float:right; visibility: visible}
.start {margin: 0 20px; padding: 20px; border-bottom: solid 2px gold;}
}
Here's my codepen
There is a usual slider with text information. How to make so that when changing the slide with the text the background picture itself also changes? How to implement this? I use slick-slider. But the text "static text here" with a white background should not change with the slider. It is important. I am interested in this implementation and its possibility in principle.
$('.js-slider').slick({
appendArrows:$('.head-slider .js-arrows'), // Class For Arrows Buttons
prevArrow:'<span class="arrow arrow_prev arrow_lg"></span>',
nextArrow:'<span class="arrow arrow_next arrow_lg"></span>',
autoplay: true,
autoplaySpeed: 2000,
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
}
.wrap {
height: 100vh;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
}
.head-slider {
max-width: 786px;
width: 100%;
position: relative;
background: rgba(195, 158, 158, 0.7);
margin: auto 0;
}
.head-slider p {
font-size: 20px;
line-height: 28px;
max-height: 165px;
overflow: hidden;
}
.arrows {
position: absolute;
top: 48px;
right: 40px;
z-index: 10;
}
.arrows_main {
top: inherit;
right: 0;
}
.slider-item {
margin: 55px;
min-height: 342px;
max-height: 342px;
overflow: hidden;
}
.arrow {
display: inline-block;
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
}
.arrow:after {
content: "";
display: inline-block;
vertical-align: middle;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 8px;
height: 8px;
border-top: 2px solid #c96217;
border-right: 2px solid #c96217;
transition: transform 0.5s;
}
.arrow_next:after {
transform: rotate(45deg);
}
.arrow_prev:after {
transform: rotate(225deg);
}
.text {
background: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="wrap" style="background-image: url(https://images.unsplash.com/photo-1539567601-bf304c363f16?ixlib=r0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7aee0ae43485302fd9e03461549a1459&auto=format&fit=crop&w=3891&q=80)">
<div class="head-slider">
<div class="arrows arrows_main js-arrows"></div>
<div class="slider js-slider">
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus soluta inventore nisi tempore! In deleniti nobis, incidunt doloremque quia labore vero odio, accusantium laborum, necessitatibus perspiciatis minima esse itaque! Fuga, dolore animi esse voluptatibus recusandae assumenda sed praesentium eos ex!
</p>
</div>
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe porro qui sint, obcaecati eius excepturi! Cumque accusamus numquam maiores dolorum quaerat suscipit cum placeat praesentium.</p>
</div>
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quasi.</p>
</div>
</div>
</div>
<div class="text">
static text here
</div>
</div>
Good question Dan,
One way to handle this is by placing a "cover" over your slider. Use absolute positioning to place a div over your slider. Then, you can place text in front of the slider, while having the slider rotate images in the background.
I went ahead and added a snippet to make my answer more clear.
https://codepen.io/jacobshenning/pen/qJVMQa
HTML
<div class="container">
<div class="cover">
Cover Text
</div>
<div class="slider">
<div id="ImageOne"></div>
<div id="ImageTwo"></div>
<div id="ImageThree"></div>
</div>
</div>
CSS
.container {
height: 600px;
width: 400px;
}
.cover {
color: white;
position: absolute;
padding: 20px;
font-size: 24px;
z-index: 100;
}
#ImageOne {
background-image: url('http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg');
background-size: cover;
min-height: 300px;
}
#ImageTwo {
background-image: url('http://gbaproducts.com/wp-content/uploads/2017/11/img-placeholder-dark-vertical.jpg');
background-size: cover;
min-height: 300px;
}
#ImageThree {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHdqxo4BzJeS6EZkWzm9lqnmikKnGUXBsTAm1V55j3IWAfMn2daQ');
background-size: cover;
min-height: 300px;
}
JS
$(document).ready(function(){
$('.slider').slick();
});
So, I have a question here. I want to do a simple dropdown animation where I have this button at the bottom of the div's original height. When I toggle a class, div's height changes, and I want the button to always stay at the bottom. How do I do that? Code is right here:
var btn = document.getElementById("btn");
var div = document.getElementById("div");
function dropDownAnimation(){
div.classList.toggle("dropdown");
}
btn.onclick = dropDownAnimation
.div {
background-color: gray;
font-family: Arial;
font-size: 18px;
width: 150px;
transition: 500ms ease;
}
.div > button {
width: 50px;
height: 50px;
font-size: 10px;
}
.dropdown {
height: 300px;
}
#btn {
margin-top: 15px;
}
<div class="div" id="div">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quasi pariatur illo earum excepturi ipsam.
<button>Make me stay at bottom!</button>
</div>
<button id="btn">Press me for dropdown</button>
No jQuery answers please.
var btn = document.getElementById("btn");
var div = document.getElementById("div");
function dropDownAnimation(){
div.classList.toggle("dropdown");
}
btn.onclick = dropDownAnimation
.div {
position:relative;
padding-bottom:50px;
background-color: gray;
font-family: Arial;
font-size: 18px;
width: 150px;
transition: 500ms ease;
}
.div > button {
position: absolute;
left: 0%;
bottom: 0%;
width: 50px;
height: 50px;
font-size: 10px;
}
.dropdown {
height: 300px;
}
#btn {
margin-top: 15px;
}
<div class="div" id="div">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quasi pariatur illo earum excepturi ipsam.
<button>Make me stay at bottom!</button>
</div>
<button id="btn">Press me for dropdown</button>
As #Nishant code snippet shows, You don't need JavaScript to do so, only add this to your main div
position: relative;
and this to your button
position: absolute;
left: 0;
bottom: 0;
var btn = document.getElementById("btn");
var div = document.getElementById("div");
var sty = document.getElementById("sty");
function dropDownAnimation(){
div.classList.toggle("dropdown");
sty.classList.toggle('btn_margin');
}
btn.onclick = dropDownAnimation
.div {
position:relative;
background-color: gray;
font-family: Arial;
font-size: 18px;
width: 150px;
transition: 500ms ease;
}
.div > button {
position:relative;
width: 50px;
height: 50px;
font-size: 10px;
}
.dropdown {
height: 300px;
}
.btn_margin{
margin-top:67%;
}
<div class="div" id="div">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quasi pariatur illo earum excepturi ipsam.
<button id="sty">Make me stay at bottom!</button>
</div>
<button id="btn">Press me for dropdown</button>
I think It will help. thanks
I am attempting to recreate the effect found on this page http://demos.themetrust.com/hero/, where there is a slight parallax effect as the content comes up and over the banner.
I am unsure how to go about doing this, and most of the parallax tutorials I've found are either wildly different styles of parallax or css driven ones that don't really add much to the site. Would someone be able to point me in the direction of a suitable tutorial or project that I can learn from. I've been searching under "parallax banner," but, perhaps I've got the name of the effect wrong?
Here is an example of pure CSS parallax scrolling. Key are lines like
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
Maybe take a look at this Q&A too Pure CSS parallax without fixed background height?
Here is my example:
#import url(http://fonts.googleapis.com/css?family=Nunito);
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240, 230, 220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.title {
padding: 5%;
border-radius: 2px;
background: rgba(240, 230, 220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide,
.slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("http://lorempixel.com/640/480/abstract/6/");
background-attachment: fixed;
}
#slide1:before {
background-image: url("http://lorempixel.com/640/480/abstract/4/");
transform: translateZ(-1px) scale(2);
z-index: -1;
}
#slide2 {
background-image: url("http://lorempixel.com/640/480/abstract/3/");
background-attachment: fixed;
}
#slide3:before {
background-image: url("http://lorempixel.com/640/480/abstract/5/");
transform: translateZ(-1px) scale(2);
z-index: -1;
}
#slide4 {
background: #222;
}
<div id="title" class="slide header">
<h1>Your page title</h1>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Part one</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Another part</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
</div>
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Addendum</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
The trick as I understand it, is to set the background photo in css with "fixed" at the end of the url. Background-size helps to fit the photo into the container and the reset is pretty much unnecessary.
#example{
margin-top:10em;
background:url('https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg') fixed;
background-size: cover;
height:300px;
}
body{
height:2000px;
}
<div id="example"></div>