I wanted to make a simple parallax effect using ScrollTrigger. The problem is the absolute div containing the "images" (currently red boxes) have a greater height than the page itself. So there is a big gap after the footer since the images have moved with ScrollTrigger. Is there anyway to prevent this big gap?
Here's a JSFiddle. To see the problem in action the width of the preview window needs to be at least 1050px.
HTML
<body class="test">
<section class="hero">
<div class="wrapper">
<h1>ScrollTrigger</h1>
</div>
</section>
<section class="main">
<div class="wrapper">
<div class="innerContainer">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, ipsum at efficitur pellentesque, turpis ante rhoncus leo, quis dignissim felis ante.</h2>
</div>
<div id="parallax" class="imgContainer">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<!-- Uncomment to see the "ghost" of the red boxes -->
<!-- <div class="imgContainer">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div> -->
</div>
</section>
<footer>
<div class="wrapper">
<h2>Footer</h2>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/ScrollTrigger.min.js"></script>
<script src="index.js"></script>
</body>
SCSS
* {
padding: 0;
margin: 0;
font-family: monospace;
}
.wrapper {
position: relative;
max-width: 1600px;
margin: auto;
padding: 20px;
}
body {
.hero {
height: 600px;
}
h1 {
font-size: 120px;
}
h2 {
font-size: 40px;
padding-top: 20px;
padding-bottom: 20px;
}
&.home {
.hero {
background-color: aqua;
position: absolute;
height: 3000px;
}
p {
width: 40%;
font-size: 20px;
}
}
&.test {
.hero {
background-color: rgb(255, 136, 0);
}
section {
h2 {
font-size: 180px;
}
}
}
}
header {
width: 100%;
background-color: white;
filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.145));
}
footer {
width: 100%;
background-color: rgb(225, 225, 225);
filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.145));
}
.innerContainer {
position: relative;
z-index: 2;
}
.imgContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
.img {
background-color: yellow;
width: 500px;
height: 700px;
margin-top: 200px;
position: relative;
&:first-of-type {
margin-top: 0;
}
&:nth-child(2n+1) {
margin-left: 50%;
}
}
&:not(#parallax) {
.img {
background-color: transparent;
border: 1px solid red;
}
}
}
JS
gsap.set("#parallax", {
y: 0
});
gsap.to('#parallax', {
scrollTrigger: {
trigger: '#parallax',
toggleActions: "restart pause reverse pause",
markers: true,
start: 'top center',
end: 'bottom bottom',
scrub: 0.5
},
y: -2200,
duration: 0.5
});
This is because of the markers. The markers are added to the DOM where they need to go, which lengthens the page if the marker is at or after the bottom of the page.
You can remove markers: true or to prevent this from happening.
Related
So, I have a gallery that is laid out in a CSS grid. When I click on one of the items it opens info and images associated with that item. This info and images are also laid out in a grid.
My issue is that none of the transitions are working and I am not sure why and how to fix this.
// portfolio
$('.gallery .portfolio .portfolio-group a').click(function() {
var itemID = $(this).attr('href');
$('.gallery .portfolio').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .gallery .portfolio').removeClass('item_open');
return false;
});
$(".gallery .portfolio .portfolio-group a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
});
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
line-height: 1.5;
color: #333;
}
a {
color: #fff;
}
.row {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 0;
clear: both;
}
.row img {
max-width: 100%;
height: auto;
padding: 0;
margin: 0;
}
header {
background-color: #84b4b1;
color: #fff;
text-align: center;
padding: 30px 0 120px;
}
header h1 {
text-align: center;
text-transform: uppercase;
font-size: 65px;
font-weight: 400;
letter-spacing: 3px;
line-height: .8;
padding-top: 50px;
font-family: 'Montserrat', sans-serif;
}
header span {
text-transform: uppercase;
letter-spacing: 7px;
font-size: 25px;
line-height: 1;
}
header p {
padding-top: 30px;
}
.gallery {
padding: 40px 0 300px;
position: relative;
}
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.gallery .portfolio {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.gallery .portfolio .portfolio-group {
overflow: hidden;
}
.gallery .portfolio .portfolio-group a {
display: block;
position: relative;
width: 85%;
height: 100%;
margin: 0;
padding: 0;
line-height: 0;
}
#media (min-width: 40em) {
.gallery .portfolio .portfolio-group a {
width: 100%;
}
}
#media (min-width: 64em) {
.gallery .portfolio .portfolio-group a {
width: 100%;
}
}
.gallery .portfolio .portfolio-group a:before {
position: absolute;
width: 32px;
height: 32px;
top: 40%;
left: 50%;
margin: -14px 0 0 -16px;
background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%20inkscape%3Aversion%3D%220.48.4%20r9939%22%20sodipodi%3Adocname%3D%22icon-fullscreen.svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20960%20560%22%0A%09%20enable-background%3D%22new%200%200%20960%20560%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Csodipodi%3Anamedview%20%20borderopacity%3D%221%22%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20objecttolerance%3D%2210%22%20gridtolerance%3D%2210%22%20guidetolerance%3D%2210%22%20showgrid%3D%22false%22%20fit-margin-top%3D%220%22%20fit-margin-left%3D%220%22%20inkscape%3Azoom%3D%227.375%22%20inkscape%3Acx%3D%22-5.1525424%22%20inkscape%3Acy%3D%2216%22%20id%3D%22namedview11%22%20inkscape%3Awindow-x%3D%22-8%22%20inkscape%3Awindow-y%3D%22-8%22%20fit-margin-right%3D%220%22%20inkscape%3Apageopacity%3D%220%22%20fit-margin-bottom%3D%220%22%20inkscape%3Awindow-width%3D%221366%22%20inkscape%3Awindow-height%3D%22706%22%20inkscape%3Awindow-maximized%3D%221%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Acurrent-layer%3D%22svg2%22%3E%0A%09%3C/sodipodi%3Anamedview%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22220%22%20y%3D%22260%22%20fill%3D%22%23FFFFFF%22%20width%3D%22536%22%20height%3D%2224%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22476%22%20y%3D%224%22%20fill%3D%22%23FFFFFF%22%20width%3D%2224%22%20height%3D%22556%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A) no-repeat;
content: '';
opacity: 0;
z-index: 1;
-webkit-transition: all, 0.3s, linear;
transition: all, 0.3s, linear;
}
.gallery .portfolio .portfolio-group a:hover:before {
top: 50%;
opacity: 1;
}
.gallery .portfolio .portfolio-group a:after {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
content: '';
opacity: 0;
transition: all, 0.3s, linear;
}
.gallery .portfolio .portfolio-group a:hover:after {
opacity: 1;
}
.gallery .portfolio-item-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 5px;
}
#media (min-width: 64em) {
.gallery .portfolio-item-container {
grid-template-columns: repeat(2, 1fr);
}
}
.port {
position: absolute;
width: 100%;
top: 0;
left: 0;
padding-top: 100px;
background: #ffffff;
background-color: #fafafa;
z-index: 103;
visibility: hidden;
transform: translateY(-100%);
border-bottom: 1px solid #d0d0d0;
transition: (all, 0.5s, ease-in-out);
}
.port img {
width: 100%;
}
.port h1 {
font-size: 35px;
line-height: 1;
padding: 0;
}
.port h1>* {
opacity: 0;
transition: (all, 0.5s, linear);
}
.port.item_open {
visibility: visible;
transform: translateY(0%);
transition: (all, 0.4s, ease-in-out);
}
.port.item_open>* {
opacity: 1;
transition-delay: 0.5s;
}
.close {
width: 21px;
height: 21px;
background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat;
position: absolute;
right: 50px;
margin-top: 50px;
opacity: 0;
z-index: 1004;
transition: (all, 0.1s, ease-in-out);
}
.item_open .close {
opacity: 1;
top: 0px;
transition: (all, 0.3s, ease-in-out);
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body translate="no" data-new-gr-c-s-check-loaded="8.896.0" data-gr-ext-installed="">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<header>
<h1>Portfolio Gallery</span>
</h1>
</header>
<div id="top"></div>
<!-- Projects -->
<section class="gallery clearfix">
<div class="row">
<div class="portfolio">
<a class="close" href="#"></a>
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</a>
</div>
<!-- / div #1 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3892302/contact.png" alt="">
</a>
</div>
<!-- / div #2 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4154721/dive--001.png" alt="">
</a>
</div>
<!-- / div #3 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3695553/news.png" alt="">
</a>
</div>
<!-- / div #4 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3695553/news.png" alt="">
</a>
</div>
<!-- / div #5 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4360101/liberosis_--_12.png" alt="">
</a>
</div>
<!-- / div #6 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3148799/technical-book.jpg" alt="">
</a>
</div>
<!-- / div #7 -->
<div class="portfolio-group">
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/2883479/cover.jpg" alt="">
</a>
</div>
<!-- / div #8 -->
</div>
<!-- / .portfolio -->
</div>
<!-- / .row -->
<!-- Item 01-->
<div id="item01" class="port">
<div class="row">
<div class="description">
<h1>Item 01</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.
</div>
<!-- / .description -->
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</div>
<!-- / .row -->
</div>
<!-- / #item01-->
<!-- Item 02-->
<div id="item02" class="port">
<div class="row">
<div class="portfolio-item-container">
<div class="description">
<h1>Item 02</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.
</div>
<!-- / .description -->
<div class="portfolio-item">
<img src="dist/image/CAHQ-About-Us.jpg" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4360101/liberosis_--_12.png" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4360101/liberosis_--_12.png" alt="">
</div>
<div class="portfolio-item">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</div>
</div>
<!-- / .portfolio-item-container -->
</div>
<!-- / .row -->
</div>
<!-- / #item02-->
</section>
<!-- / Projects -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
I realized I made a mistake in having the transition code in parentheses. With that fix, everything works and !
I set the top navigation bar as being sticky on top, but it's acting weird in some places.
Here's the fiddle link https://jsfiddle.net/benjaminana77/pugek2f8/30/ and I reproduced code below.
I'm having problems in three places
In the hero image section, top nav background is incorrectly being transparent. I set the background color as white, not transparent.
The top nav bar incorrectly shows BEHIND a slider, not above the slider.
When you hover over an item in the grid layout, the item shows above the top nav bar.
normal state:
when you hover over an image:
Many thanks in advance!
HTML:
<div class="boxA">
<div class="box1">
<div class="site">
<img src="img/logo.png">
</div>
</div>
<div class="box2">
<nav class="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
</div>
</div>
<div class="body-part">
<section class="conA">
<div id="container">
<div id="heroText">
<p>Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit</p>
<div id="text"></div>
</div>
<div id="images"></div>
</div>
</section>
<ul class="slider" style="padding:0px !important;">
<li><img src="img/sample.png">
<div class="caption1">caption 1</div>
</li>
<li> <img src="img/Group 3.png">
<div class="caption2"></div>
<div class="caption3">caption 2</div>
<div class="caption5">caption 3</div>
<div class="caption4">caption 4</div>
</li>
</ul>
<section id="conD">
<div class="container">
<div class="grid menu-content" id="menu1-content">
<article>
<a href="#">
<div class="photo" style="background-image: url(https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG);"></div>
<div class="text">
<h3>Title </h3>
<p>Lorem ipsum dolor </p>
</div>
</a>
</article>
<article>
<a href="#">
<div class="photo" style="background-image: url(img/sample.jpg);"></div>
<div class="text">
<h3>Headingg</h3>
<p>Lorem ipsum dolor </p>
</div>
</a>
</article>
<article>
<a href="#">
<div class="photo" style="background-image: url(img/sample.jpg);"></div>
<div class="text">
<h3>Headingg</h3>
<p>Lorem ipsum dolor </p>
</div>
</a>
</article>
</div>
</div>
</section>
CSS:
.boxA:after {
content:"";
display: block;
clear: both;
}
.boxA {
height: 90px;
position: fixed;
border-bottom: 1px solid #E0DCDC;
top: 0;
width: 100%;
background-color: white;
max-width: 1440px;
}
.boxA img {
position: absolute;
top: 50%;
left: 3%;
transform: translate(0, -50%);
}
.box2 ul {
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 10px;
}
.box1 {
float: left;
width: auto;
}
.box2 {
float: right;
width: auto;
}
.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}
.box2 li a {
display: block;
padding: 0px 50px;
color: inherit;
text-decoration: none;
font-size: 12px;
}
.box2 li a:hover {
text-decoration: underline;
}
.box2 ul:after {
content: "";
display: block;
clear: both;
}
.box2 li {
float: left;
width: auto;
font-family: 'Gotham';
letter-spacing: 2.5px;
}
.box1 img {
position: absolute;
width: 20%;
height: auto;
}
#top-logo {
margin-top: 40px;
}
#top-logo img {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
height: auto;
}
body {
font-family: gotham;
margin: 0px !important;
color: #827F88;
letter-spacing: 0.4px;
line-height: 1.9;
}
.conA {
height: 100vh;
display: flex;
position: relative;
}
.conA #container {
margin: 0;
display: flex;
align-items: flex-start;
position: absolute;
top: 50%;
left: 10%;
transform: translate(0%, -50%);
}
#heroText {
font-size: 37px;
color: #56525E;
line-height: 1 !important;
}
.conA #heroText {
height: 400px;
padding-top: 100px;
}
#conD ul {
margin: 0 0 30px -30px;
padding: 0;
list-style: none;
}
#conD li {
padding: 35px;
display: block;
text-decoration: none;
font-size: 15.5px;
letter-spacing: 2px;
color: inherit;
}
#conD li {
float: left;
width: auto;
}
#conD ul:after {
content:"";
display: block;
clear: both;
}
#conD .menu {
margin-bottom: 20px
}
.grid {
display: grid;
justify-content: start;
margin-top: -20px;
}
.grid .photo {
width: 100%;
background-size: contain;
background-position: center;
}
.grid .photo:after {
content: "";
display: block;
padding-bottom: 100%;
}
.grid a {
display: block;
text-decoration: none;
color: inherit;
}
.grid a:hover {
opacity: 0.8;
}
JQUERY:
$(document).ready(function(){
$('.slider').bxSlider({
auto: true,
pause: 3000,
mode: 'fade',
speed: 1200,
pager: false
});
});
(function ($) {
$(document).ready(function(){
// hide .navbar first
$(".boxA").hide();
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we start fadeIn
if ($(this).scrollTop() > 50) {
$('.boxA').fadeIn();
$('#top-logo').fadeOut();
} else {
$('.boxA').fadeOut();
$('#top-logo').fadeIn();
}
});
});
});
}(jQuery));
Add z-index:2 on .boxA
.boxA {
height: 90px;
position: fixed;
border-bottom: 1px solid #E0DCDC;
top: 0;
width: 100%;
background-color: white;
max-width: 1440px;
z-index: 2;
}
.body-part{
position: relative;
z-index: 1;
}
https://jsfiddle.net/lalji1051/24rm0yvt/
updated link - https://jsfiddle.net/lalji1051/24rm0yvt/3/
I am having trouble getting my code to look like the one provided by the link.
http://prntscr.com/pqrax8 If anyone could help me to do that, that would be greatly appreciated and helpful. Thank you in advance. Thank you in advance.
.testimonials {
font-family: 'Roboto Slab', serif;
max-width: 250px;
border-radius: 40px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
padding: 20px;
margin: 20px 0 0 0;
position: relative;
top: 20em;
left: 100px;
background-color: #fff;
}
.ellipse {
position: static;
max-width: 4em;
vertical-align: middle;
padding-right: 1em;
}
.test {
padding-right: 1em;
vertical-align: middle;
line-height: 20px;
text-align: right;
}
h2 {
color: #60AF64;
text-align: right;
}
<body>
<div class="greensidebox">
<div class="testimonials">
<h2>Judith Cooper</h2>
<img class="ellipse" src="images/Ellipse.png" alt="testimonialpic1">
<div class="test">Lorem ipsum dolor sit amet.Sagittis convallis ligula metus.</div>
</div>
<div class="testimonials">
<h2>Julie Howard</h2>
<img class="ellipse" src="images/Ellipse-1.png" alt="testimonialpic1">
<div class="test">Lorem ipsum dolor sit amet. Sagittis convallis ligula metus.</div>
</div>
<div class="testimonials">
<h2>Kevin Adams</h2>
<img class="ellipse" src="images/Ellipse-2.png" alt="testimonialpic1">
<div>Lorem ipsum dolor sit amet. Sagittis convallis ligula metus.</div>
</div>
</div>
</body>
Flexbox...I put that shhh on everything.
* {
padding: 0;
margin: 0;
line-height: 1;
}
.wrapper {
background-color: lime;
padding: 1rem;
width: 320px;
}
.box {
display: flex;
background-color: #FFF;
border-radius: 32px;
padding: 1.5rem 0.5rem;
margin: 1.5rem 0;
box-shadow: 0 8px 4px rgba(0, 0, 0, 0.2)
}
.box img {
border-radius: 50%;
margin-right: 1rem;
}
.box strong {
font-size: 1.25rem;
display: block;
margin-bottom: 0.25rem;
}
<div class="wrapper">
<div class="box">
<img src="https://via.placeholder.com/80">
<div>
<strong>Judas Priest</strong>
<p>I'm made of metal my circuits gleam I am perpetual I keep the country clean</p>
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/80">
<div>
<strong>Judas Priest</strong>
<p>I'm made of metal my circuits gleam I am perpetual I keep the country clean</p>
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/80">
<div>
<strong>Judas Priest</strong>
<p>I'm made of metal my circuits gleam I am perpetual I keep the country clean</p>
</div>
</div>
</div>
I have a 3 column tile responsive design that's 1 column in mobile and 3 columns in desktop and each tile has a content drawer that needs to stretch the FULL width of the screen (complete with blue background).
I have a working model in a pen below but can't get the drawers to stretch full width?
Not sure if it's CSS or if there's a more optimum HTML layout as doing the mobile first design and it works, just not in Desktop/wider views.
Codepen:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
function openDrawer(tile) {
var drawer = $(tile).attr("drawer");
if ( $(tile).hasClass("ESGActive") ){ // Already is active?
$(".ESGTile").removeClass("ESGActive");
$("#" + drawer).slideUp();
} else {
// Get all tiles with class="ESGActive" and remove it
$(".ESGTile").removeClass("ESGActive");
// Get all elements with class="ESGDrawer" and hide them
$(".ESGDrawer").slideUp();
// Show the current tab drawer, add "active" class to the button
$("#" + drawer).slideDown();
$(tile).addClass("ESGActive");a
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
.ESGTiles > div{
display:inline;
padding:0;
}
.ESGDrawer {
float:left;
margin:0;
}
.ESGTile > img{
display:none;
}
#media screen and (min-width: 1024px){
.ESGTile > img, .FAQTile > img {
display:block;
}
.ESGTiles > div{
padding:15px;
}
}
#media screen and (max-width: 1024px){
.ESGDrawer {
margin-top: 0!important;
padding: 2em 0!important;
}
.FAQTile img, .ESGDrawer img {
display: none;
}
.ESGTile, .FAQTile {
margin: 0.2em 0;
}
span.drawerToggle {
position: relative;
width: 24px!important;
height: 24px!important;
float:right;
}
.call-to-action img {
width: 70%;
margin: 0 auto 2em auto;
}
}
.FAQTile {
background: #36872a!important;
width: 100%;
}
.drawerToggle{
position: relative;
width: 30px;
height: 30px;
float:right;
}
.drawerToggle:before, .drawerToggle:after{
content: "";
position: absolute;
background-color: white;
transition: transform 0.25s ease-out;
}
.drawerToggle:before{
top: -1px;
left: 50%;
width: 2px;
height: 100%;
margin-left: -1px;
}
.drawerToggle:after{
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -2px;
}
/**.ESGTile:hover .drawerToggle:before{ transform: rotate(90deg); }
.ESGTile:hover .drawerToggle:after{ transform: rotate(180deg); }**/
.ESGActive .drawerToggle:before{ transform: rotate(90deg); }
.ESGActive .drawerToggle:after{ transform: rotate(180deg); }
.ESGTile, .FAQTile {
display: block;
position: relative;
cursor: pointer;
overflow: hidden;
background-color: #1f335a;
color: #fff;
z-index: 100;
font-weight: 700;
}
.ESGTile h3, .FAQTile h3 {
color: #fff;
}
.ESGTile:hover {
background-color: #344794;
color: #fff;
text-decoration: none;
}
.FAQTile:hover {
background-color: #00a651!important;
color: #fff;
text-decoration: none;
}
.ESGActive {
background: #344794;
}
.ESGActive:after {
bottom: -3px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
z-index: 120;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
.ESGTile h3, .FAQTile h3 {
font-size: 1.2em;
}
.ESGLabel, .FAQLabel {
margin: 0;
display: block;
padding: 0.8em 15px;
}
.ESGDrawer {
display: none;
background: #1f335a;
color: #fff;
padding: 4em 0;
margin-top: 0.3em;
z-index: 90;
position:inline-block;
width:100vw;
left:0;
}
.ESGDrawer h4 {
font-size: 1.8em;
margin-bottom: 1em;
}
.ESGDrawer p {
line-height: 1.4em;
}
.ESGDrawer p.cta-wrapper {
margin: 0.3em 0 0 0;
}
.ESGDrawer p.cta-wrapper a:before {
bottom: 0;
}
.ESGDrawer a:link, .ESGDrawer a:hover, .ESGDrawer a:visited {
text-decoration: none;
color: #fff;
}
hr {
display: none;
}
.call-to-action {
padding: 3em 0;
}
footer {
margin-top: 0;
}
<div class="container">
<div class="row">
<!-- TILE 1 *********************** -->
<div class="col-xs-12 col-md-4">
<!-- Tile -->
<a class="ESGTile" onclick="openDrawer(this)" drawer="title-1">
<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
<h3 class="ESGLabel">Title 1<span class="drawerToggle"></span></h3>
</a>
<!-- Drawer -->
<div id="title-1" class="container-fluid ESGDrawer">
<div class="container ESGMiddleDrawerContent">
<div class="row">
<div class="col-xs-12 col-md-6">
<h4>Title 1</h4>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
<!-- TILE 2 *********************** -->
<div class="col-xs-12 col-md-4">
<!-- Tile -->
<a class="ESGTile" onclick="openDrawer(this)" drawer="title-2">
<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
<h3 class="ESGLabel">Title 2<span class="drawerToggle"></span></h3>
</a>
<!-- Drawer -->
<div id="title-2" class="container-fluid ESGDrawer">
<div class="container ESGMiddleDrawerContent">
<div class="row">
<div class="col-xs-12 col-md-6">
<h4>Title 2</h4>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
<!-- TILE 3 *********************** -->
<div class="col-xs-12 col-md-4">
<!-- Tile -->
<a class="ESGTile" onclick="openDrawer(this)" drawer="title-3">
<img class="img-responsive" src="http://www.kamunga.com/test.jpg" height="360" width="640">
<h3 class="ESGLabel">Title 3<span class="drawerToggle"></span></h3>
</a>
<!-- Drawer -->
<div id="title-3" class="container-fluid ESGDrawer">
<div class="container ESGMiddleDrawerContent">
<div class="row">
<div class="col-xs-12 col-md-6">
<h4>Title 3</h4>
<p>Lorem ipsum</p><p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here you're
I added this code at the end of the CSS
.body {
position: relative;
}
.ESGDrawer {
position: absolute;
top: 247px;
left: 0px;
width: 100%;
}
.x{
position: inherit;
}
and I add a new classname to each of your col-xs-12 col-md-4 divs
Check the working demo here
https://codepen.io/anon/pen/JaQPjN
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying achieve an effect in which the image I am displaying is displayed within a computer screen. So basically, there'll be an image of a computer screen and my image within the screen.
What I am about to do is use photoshop to display the whole thing as a single image. But this is not really scalable. The other idea I had was to create CSS border images of the computer screen, however this sounds a bit involved, I am looking for a quick thing.
I know I've seen this effect on plenty of websites (but I can't remember the name of any to check the source), and I really feel there might be a ready-to-use solution to achieve that. Does such a ready-to-use solution exists or can you think of a simple way to achieve that ?
Create a computer image say(500x500)px with its screen transparent(blank) and export it as png with transparency on.
Then export you another image with same resolution.
And then you css position to place them on each other.
#computer_image{
position:relative;
z-index:100; /*To keep computer screen above use positive value*/
}
#computer_screen{
position:relative;
z-index:50;
/*Use top/left/right/bottom to place image on computer screen*/
}
Not sure if this I got you right, but here is a little demo of a MacBook Pro screen with a grumpy cat on it. Is this the kind of result you want to achieve? (EDIT: take a look for snippet #2 for the whole body (use the "full-page" view for a better result) )
Screen only
html * {
box-sizing: border-box;
}
#content {
background: url('http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg') no-repeat center center;
background-size: contain;
width: 100%;
height: 100%;
}
#outer-frame {
border: 4px solid #DADFE1;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
height: 350px;
width: 600px;
}
#inner-frame {
height: 100%;
border: 20px solid #000;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
}
<div id="outer-frame">
<div id="inner-frame">
<div id="content"></div>
</div>
</div>
Screen + body
html * {
box-sizing: border-box;
}
.wrap{
width: 100%;
height: 100%;
}
#content {
background: url('http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg') no-repeat center center;
background-size: contain;
width: 100%;
height: 100%;
}
#outer-frame {
border: 4px solid #DADFE1;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
height: 350px;
width: 600px;
margin: 0 auto;
}
#inner-frame {
height: 100%;
border: 20px solid #000;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
}
#body{
height: 20px;
background: #DADFE1;
width: 700px;
margin: 0 auto;
border-radius: 2px;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
}
#notch{
height:10px;
width: 100px;
background: #BDC3C7;
margin: 0 auto;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
box-shadow: inset 1px -1px 2px rgba(0,0,0,0.5);
}
<div class="wrap">
<div id="outer-frame">
<div id="inner-frame">
<div id="content"></div>
</div>
</div>
<div id="body">
<div id="notch"></div>
</div>
</div>
This can be achieved by using CSS positioning methods. Here is an example you can use.
JSbin Demo
.project-widget-container {
position: relative;
margin-bottom: 30px;
}
.project-widget-container section {
position: relative;
padding-top: 20px;
margin-left: 10px;
}
.project-widget-container section:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 20px;
bottom: 0;
border: 1px solid #eee;
z-index: -1;
}
.project-widget-container section:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 20px;
bottom: 0;
box-shadow: -5px -5px 5px -5px #eee, 5px -5px 5px -5px #eee;
z-index: -1;
}
.project-title {
border-left: 2px solid #660061;
padding-left: 20px;
}
.project-title h4 {
color: #660061;
font-weight: bold;
font-size: 1.4em;
line-height: 50px;
}
.project-excerpt {
color: #666;
font-size: 1.1em;
padding: 20px 20px 0 20px;
line-height: 1.2em;
height: 60px;
}
img.imac {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.project-image-container {
position: relative;
left: -10px;
padding-top: 85%;
}
.thumb img {
width: 50%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25%;
}
.thumb {
position: absolute;
z-index: 1;
bottom: 18%;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="clearfix visible-sm"></div>
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem Test dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="clearfix visible-sm"></div>
</div>
<!-- row -->
</div>
<!-- container -->
</body>
</html>