We Keep Coding

Why can I not scroll past my parallax without moving the mouse first?

So I am trying to do a Webpage with a Parallax landing picture. For the Parallax effect to work, it has a higher height, so the user will have to scroll down. This creates a second scrollbar on the side only for this Parallax. So far so good. The problem is when I scroll down to the end of the Parallax, the second scrollbar is not activated automatically, I have to move the mouse a little bit to continue scrolling on the normal content of the Webpage.
Here is a working example of my problem:
Codepen
Is there any way I can make it keep scrolling after reaching the end of the Parallax without moving the mouse first?
* {
box-sizing: border-box;
}
html,
body {
background-color: #fedcc8;
}
.parallax {
-webkit-perspective: 100px;
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -1500px;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer img {
display: block;
position: absolute;
bottom: 0;
}
.parallax__cover {
background: #2d112b;
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 1000px;
z-index: 2;
}
.parallax__layer__0 {
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);
}
.parallax__layer__1 {
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);
}
.parallax__layer__2 {
-webkit-transform: translateZ(-200px) scale(3);
transform: translateZ(-200px) scale(3);
}
.parallax__layer__3 {
-webkit-transform: translateZ(-150px) scale(2.5);
transform: translateZ(-150px) scale(2.5);
}
.parallax__layer__4 {
-webkit-transform: translateZ(-100px) scale(2);
transform: translateZ(-100px) scale(2);
}
.parallax__layer__5 {
-webkit-transform: translateZ(-50px) scale(1.5);
transform: translateZ(-50px) scale(1.5);
}
.parallax__layer__6 {
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
}
<section>
<div style="height: 100vh">
<div class="parallax">
<div class="parallax__layer parallax__layer__0">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__1">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__2">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__3">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__4">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__5">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__6">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
</div>
<div class="parallax__cover"></div>
</div>
</div>
</section>
<section>
<v-col class="pa-5" cols="12" md="6">
<span class="d-flex justify-center mb-5">
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
</span>
<span class="d-flex justify-center">
Skills
</span>
<span class="d-flex justify-center mb-5">
Lorem ipsum dolor sit amet, consecte tur adipi scin e<br />
lit. Etiam vulputate augu e vel felis gravida porta.
</span>
<v-row>
</v-row>
</v-col>
</section>
Any help is appreciated!

First thing first, I would suggest adding a position: relative; in the .parallax in order to remove the double scroll.
The issue you're experiencing is a browser related scrolling issue and not a problem with your code (it does work on Firefox, but not on Chrome for example). So there's no "fix".
But there's clearly other ways to go about using parallax to prevent the issue from even happening like scroll each parallax manually without relying on browser's scroll.
Or you can simulate a click when reaching the top or the bottom to be able to overcome the issue :
$('div').on('scroll', chk_scroll);
function chk_scroll(e) {
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
$("#parallax").trigger("click");
} else if (elem.scrollTop() == 0) {
$("#parallax").trigger("click");
}
}
$('div').on('scroll', chk_scroll);
function chk_scroll(e) {
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
$("#parallax").trigger("click");
} else if (elem.scrollTop() == 0) {
$("#parallax").trigger("click");
}
}
* {
box-sizing: border-box;
}
html,
body {
background-color: #fedcc8;
}
.parallax {
-webkit-perspective: 100px;
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: relative;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -1500px;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer img {
display: block;
position: absolute;
bottom: 0;
}
.parallax__cover {
background: #2d112b;
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 1000px;
z-index: 2;
}
.parallax__layer__0 {
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);
}
.parallax__layer__1 {
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);
}
.parallax__layer__2 {
-webkit-transform: translateZ(-200px) scale(3);
transform: translateZ(-200px) scale(3);
}
.parallax__layer__3 {
-webkit-transform: translateZ(-150px) scale(2.5);
transform: translateZ(-150px) scale(2.5);
}
.parallax__layer__4 {
-webkit-transform: translateZ(-100px) scale(2);
transform: translateZ(-100px) scale(2);
}
.parallax__layer__5 {
-webkit-transform: translateZ(-50px) scale(1.5);
transform: translateZ(-50px) scale(1.5);
}
.parallax__layer__6 {
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<section id="parallax">
<div style="height: 100vh">
<div class="parallax">
<div class="parallax__layer parallax__layer__0">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__1">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__2">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__3">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__4">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__5">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__6">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
</div>
<div class="parallax__cover"></div>
</div>
</div>
</section>
<section>
<v-col class="pa-5" cols="12" md="6">
<span class="d-flex justify-center mb-5">
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
</span>
<span class="d-flex justify-center">
Skills
</span>
<span class="d-flex justify-center mb-5">
Lorem ipsum dolor sit amet, consecte tur adipi scin e<br />
lit. Etiam vulputate augu e vel felis gravida porta.
</span>
<v-row>
</v-row>
</v-col>
</section>

As you have two scrollbars, the behaviour you described is intended. You can't change this behaviour. What you can do is to alter your solution so that it conforms to the intended behaviour (i.e. make one scrollbar appear only instead of two).
You're using perspective and translateZ to create the parallax effect. This means that the container of the "parallax-ed" items must have the perspective property and the items themselves must be a direct descendent of the container. In the solution below, we're setting the perspective attribute to the body element. This means that the parallax only occurs when the body element is scrolled. Without configuring the overflow of the html element, the scroll will appear on the html element; thus, it is essential to set the html element's overflow attribute to hidden. This will cause the scrollbar to appear on the body element.
My answer is very similar to Dennis Ranish's answer. However, I use background-image and background-position: center bottom to make it so that the image is automatically centered regardless of its width (in your solution, you used margin-left: -1500px to do this). Using this solution, you need not know the intrinsic size (original size) of the image and the image will always be centered even if you change the image later on. This is more flexible than using fixed units. Coincidentally, this requires me to use divs and this works in your favour (because you mentioned a problem of using img directly in Vue [do take a look further to see what the underlying problem exactly is; it might not simply be caused by the div]).
Furthermore, I used top: 100% and position: relative to adjust it so that the content is located directly below the image. Here's the solution.
* {
box-sizing: border-box;
margin: 0;
}
html {
overflow: hidden;
}
body {
overflow-x: hidden;
background-color: #fedcc8;
height: 100vh;
-webkit-perspective: 100px;
perspective: 100px;
}
div[class^="parallax__layer"] {
position: absolute;
bottom: 0;
left: 0;
width:100vw;
height:100vh;
background-repeat: no-repeat;
background-position-y: bottom;
background-position-x: center;
}
h1 {
font-family: Helvetica;
color: #fff;
text-align: center;
}
.parallax__content {
background: #2d112b;
top: 100%;
position: relative;
padding: 200px 100px;
}
.parallax__layer--zero {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true');
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);
}
.parallax__layer--one {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true');
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);
}
.parallax__layer--two {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true');
-webkit-transform: translateZ(-200px) scale(3);
transform: translateZ(-200px) scale(3);
}
.parallax__layer--three {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true');
-webkit-transform: translateZ(-150px) scale(2.5);
transform: translateZ(-150px) scale(2.5);
}
.parallax__layer--four {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true');
-webkit-transform: translateZ(-100px) scale(2);
transform: translateZ(-100px) scale(2);
}
.parallax__layer--five {
background: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true');
-webkit-transform: translateZ(-50px) scale(1.5);
transform: translateZ(-50px) scale(1.5);
}
.parallax__layer--six {
background-image: url('https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true');
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
}
<div class='parallax__layer--zero'></div>
<div class='parallax__layer--one'></div>
<div class='parallax__layer--two'></div>
<div class='parallax__layer--three'></div>
<div class='parallax__layer--four'></div>
<div class='parallax__layer--five'></div>
<div class='parallax__layer--six'></div>
<div class='parallax__content'>
<h1>Hello y'all, this parallax works!</h1>
</div>

What you are experiencing is not a problem. Your example has 2 different elements that have a scroll bar, one with-in the other. For-example if you look at one of the code snippets on this page you will experience the same behavior. This is intended. When you reach the bottom of an element you typically don't want to start scrolling the main page all of a sudden. Chrome for example waits for you to do another action like move the mouse or just pause for long enough, then it lets you scroll the parent element.
For the parallax effect you do not want multiple scroll-able elements; you only need one. Additionally you do not need all those extra divs. Here is how I would do it...
html {
overflow: hidden;
}
body {
margin: 0;
background-color: #fedcc8;
height: 100vh;
overflow-x: hidden;
-webkit-perspective: 100px;
perspective: 100px;
}
img {
z-index: -1;
position: absolute;
left: calc(-1500px + 50vw);
border-top: calc(100vh - 455px) solid transparent;
bottom: 0;
}
.content {
background: #2d112b;
min-height: calc(100vh - 25px);
margin-top: calc(100vh - 2px);
padding: 25px;
}
.text-box {
padding: 15px 25px;
border-radius: 15px;
background: #fedcc8;
max-width: 800px;
margin: 100px auto 0;
font: italic small-caps bold 16px/2 cursive
}
.parallax-0 {
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);
}
.parallax-1 {
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);
}
.parallax-2 {
-webkit-transform: translateZ(-200px) scale(3);
transform: translateZ(-200px) scale(3);
}
.parallax-3 {
-webkit-transform: translateZ(-150px) scale(2.5);
transform: translateZ(-150px) scale(2.5);
}
.parallax-4 {
-webkit-transform: translateZ(-100px) scale(2);
transform: translateZ(-100px) scale(2);
}
.parallax-5 {
-webkit-transform: translateZ(-50px) scale(1.5);
transform: translateZ(-50px) scale(1.5);
}
.parallax-6 {
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
}
<img class='parallax-0' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true'/>
<img class='parallax-1' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true'/>
<img class='parallax-2' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true' />
<img class='parallax-3' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true'/>
<img class='parallax-4' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true'/>
<img class='parallax-5' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true'/>
<img class='parallax-6' src='https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true'/>
<div class='content'>
<div class='text-box'>
Lorem ipsum dolor sit amet, consectetur adipi scin elit. Etiam vulputate augue vel felis gravida porta. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipi scin elit. Etiam vulputate augue vel felis gravida porta. Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consectetur adipi scin elit. Etiam vulputate augue vel felis gravida porta. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipi porta. Lorem ipsum dolor sit amet.
</div>
</div>
First thing is set the body's perspective so that there is parallax. Also it is important to set the html overflow to hidden because by default page scroll bars belong the the html element. Then for the elements that get the parallax effect it is important to make sure that get moved/scaled correctly to properly align. By default all the transformations happen based off the center point. You choose to put the images inside divs that are the size of the screen and align the images to the bottom, which works well. For simplicity in the example the images are given a top border to be the size of the screen but still be at the bottom. They are also centered, z-index set to -1 to be behind the rest of the page, and their bottom is set to 0 to handle very wide screens correctly (when the border is negative it does nothing). Finally there is a div which contains the rest of the page. It has a top margin of the screens height to allow room for the parallax mountains (I subtracted 2px because I notices a weird gap between it and the mountains on mobile).
If you want to have the mountains start somewhere higher up you can put them inside of divs like you have and align them at any height or if you don't want to add divs you can do it like this...
/*__img__*/
border-top: calc(45vh - 455px / 2) solid transparent;
border-bottom: calc(55vh - 455px / 2) solid transparent;
/*__.content__*/
margin-top: min(100vh - 2px, 100vh + 455px / 2 - 2px);
The important thing to take away from this example is that you have to have the scrolling only happen in one element. Hope this helps.

This code have nice scrolling. I have refereed this link to redo your code. Hope it helps.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
overflow: hidden;
background-color: #fedcc8;
}
body {
height: 500px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 100px;
perspective: 100px;
-webkit-perspective-origin-x: 100%;
perspective-origin-x: 100%;
}
section {
position: relative;
}
.cover {
color: #fff;
background: #2d112b;
padding: 1rem;
}
.cover2 {
padding: 1rem;
background: #fedcc8;
}
.parallax__group {
height: 500px;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.parallax__layer {
position: absolute;
top: 0%;
left: 0;
right: 0;
bottom: 0;
-webkit-transform-origin-x: 100%;
transform-origin-x: 100%;
}
.parallax__layer img {
position: absolute;
left: 50%;
bottom: 0%;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
.parallax__layer__0 {
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);
z-index: 1;
}
.parallax__layer__1 {
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);
z-index: 2;
}
.parallax__layer__2 {
-webkit-transform: translateZ(-200px) scale(3);
transform: translateZ(-200px) scale(3);
z-index: 3;
}
.parallax__layer__3 {
-webkit-transform: translateZ(-150px) scale(2.5);
transform: translateZ(-150px) scale(2.5);
z-index: 4;
}
.parallax__layer__4 {
-webkit-transform: translateZ(-100px) scale(2);
transform: translateZ(-100px) scale(2);
z-index: 5;
}
.parallax__layer__5 {
-webkit-transform: translateZ(-50px) scale(1.5);
transform: translateZ(-50px) scale(1.5);
z-index: 6;
}
.parallax__layer__6 {
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
z-index: 7;
}
<section class="parallax__group">
<div class="parallax__layer parallax__layer__0">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__1">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__2">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__3">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__4">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__5">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__6">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
</div>
</section>
<section class="parallax__group cover">
<v-row>
<v-col class="pa-5" cols="12" md="6">
<span class="d-flex justify-center mb-5">
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
</span>
<span class="d-flex justify-center">
Skills
</span>
<span class="d-flex justify-center mb-5">
Lorem ipsum dolor sit amet, consecte tur adipi scin e<br />
lit. Etiam vulputate augu e vel felis gravida porta.
</span>
<v-row>
</v-row>
</v-col>
</v-row>
</section>
<section class="cover2">
<v-row>
<v-col class="pa-5" cols="12" md="6">
<span class="d-flex justify-center mb-5">
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipi<br />
scin elit. Etiam vulputate augue vel felis gravida<br />
porta. Lorem ipsum dolor sit amet.
</span>
<span class="d-flex justify-center">
Skills
</span>
<span class="d-flex justify-center mb-5">
Lorem ipsum dolor sit amet, consecte tur adipi scin e<br />
lit. Etiam vulputate augu e vel felis gravida porta.
</span>
<v-row>
</v-row>
</v-col>
</v-row>
</section>

Have different <p> tag value show up in a separate div when you click each separate section

long time listener, first time caller. I am trying my hand at making an NHL draft chart, as I do some player evaluation and want a fancy looking place to put it all/I'm having a bit of fun while I learn SASS for the first time (it rocks, btw).
Codepen: https://codepen.io/trjwaugh/pen/abONgLm
$desktop: 1000px;
$padding: 15px;
$borders: 15px;
$margin: 20px;
$logo-clip: polygon(70% 0, 100% 0%, 75% 100%, 40% 100%);
$colors: ( ggold: #FFB81C, gold-light: lighten(#FFB81C, 40%), //buf, cbj, edm, fla, nsh
bblue: #002654, blue-light: lighten(#002654, 40%), ragsblue: #0038A8, ragsblue-light: lighten(#0038A8, 40%), leafblue: #00205B, leafblue-light: lighten(#00205B, 40%), rred: #C8102E, red-light: lighten(#C8102E, 40%), oorange: #F74902, orange-light: lighten(#F74902, 40%), starsgreen: #006847, starsgreen-light: lighten(#006847, 40%), yotesred: #8C2633, yotesred-light: lighten(#8C2633, 40%), burg: #6F263D, burg-light: ligthen(#6F263D, 40%), black: black);
#function color($color-name) {
#return map-get($map: $colors, $key: $color-name);
}
#mixin desktop {
#media (max-width: #{$desktop}) {
#content;
}
}
body,
html {
height: 100%;
font-family: 'Montserrat', sans-serif;
}
img {
margin: 0;
display: block;
width: 78px;
height: 80px;
float: right;
}
body {
margin: 0;
#bg {
clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
#include desktop {
//suff to change re: responsiveness
}
}
}
main {
#container {
white-space: nowrap;
text-align: center;
}
section#sticky-main {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
width: 100%;
margin: 1em auto;
padding: $padding;
border-radius: $borders;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
}
section#card {
margin: 1em auto;
float: right;
padding: $padding;
border-radius: $borders;
width: 100%;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
transition: .5s ease-in;
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
li {
strong {
display: inline-block;
margin-left: max(40px);
margin-top: 10px;
}
img {
display: block;
width: 138px;
height: 130px;
float: right;
#include desktop {
//suff to change re: responsiveness
width: 100px;
height: 92px;
}
}
}
}
#report.one {
margin: 1em auto;
float: right;
padding: $padding;
margin-right: 20px;
border-radius: $borders;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
width: 90%;
background-color: white !important;
color: black !important;
}
#report.one:hover {
display: block;
}
}
section#card.gold:hover {
background-color: color(ggold);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
section#card.blue:hover {
background-color: color(bblue);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
section#card.red:hover {
background-color: color(rred);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css">
<script src="https://kit.fontawesome.com/9969435508.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main>
<div class="container">
<div class="row">
<div class="col-sm-4">
<section id="sticky-main">
<div id="content"></div>
</section>
</div>
<div class="col-sm-8">
<section onmouseover="hover()" id="card" class="gold">
<ul>
<li>
<img src="logos/anaheim-ducks.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
</section>
<section onclick="showReport()" id="card" class="red">
<ul>
<li>
<img src="logos/chicago-blackhawks-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report-two" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
<section onclick="showReport()" id="card" class="blue">
<ul>
<li>
<img src="logos/columbus -bluejackets-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
<section onclick="showReport()" id="card" class="blue">
<ul>
<li>
<img src="logos/columbus -bluejackets-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
</div>
</div>
</div>
</main>
<!-- Optional JavaScript -->
<script src="script.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
If you look at the Codepen, you can see i have a bunch of sections, all will act as a card that a players draft info will appear, minus a paragraph blurb about them. There are a few things ive tried in terms of accomplishing my goal but essentially I want to be able to click on a players <section onclick="showReport()" id="card"... and have that players paragraph blurb appear in the sticky div on the left, changing based on which section card you click on. right now I have the players paragraph in a p tag within the section just for now, but im open to anything. I have a JS function on click in there for now but what I have tried so far required me to write a seperate hide() for each section (will be 31 total). Im looking for a method that will also allow me to only change the bio info and never have to adjust any code when I want to make edits to my draft chart. I hope I explained myself well enough, please tell me if I need to clarify.
Any help would be highly appreciated!

First, add this to each onclick on sections to get the element itself anytime you click on them.
...
<section onclick="showReport(this)" id="card" class="blue">
...
Then, you can use this (now turned into el variable) to find the text and put into the #content element.
function showReport(el) {
$('#content').text($(el).find('p').text());
}

Animating content from a div that is displayed inside another div

Really new to jquery, so any help appreciated it.
Trying to solve a design challenge. I needed to display the content from a div inside another div, on hover of a third element.
Found some code that helped me put it together, but I wonder if there is a way to animate (slidedown, fadein, etc.) the content when is displayed.
Any idea how can I apply animation to the .html function when it displays the content?
var divContent = $("#explore-agility-content").html('');
$( ".industry" ).hover(
function() {
$("#explore-agility-content").html( $( this).find("#shortdesc").html() );
},
function() {
$("#explore-agility-content").html( divContent );
}
);
https://jsfiddle.net/rnwebdesigner/3wyrwd92/71/

Here are fadeIn fadeOut effects on hover and mouseout
check this fiddle
https://jsfiddle.net/parthjasani/3wyrwd92/72/
var divContent = $("#explore-agility-content").html('');
$(".industry").hover(
function () {
$("#explore-agility-content").html($(this).find("#shortdesc").html());
$("#explore-agility-content .wb").hide().fadeIn()
},
function () {
$("#explore-agility-content .wb").fadeOut(function () {
$("#explore-agility-content").html(divContent);
})
}
);

You can add and remove css classes which can contain several properties to be transitioned on mouse enter and leave..
See snippet below (solution 1)
$('.image').mouseenter(function(){
$(".text").addClass("animate")
});
$('.image').mouseleave(function(){
$(".text").removeClass("animate")
});
.image {
width: 50px;
height: 50px;
display: block;
background-color: red;
}
.text {
background-color: white;
padding:40px;
transition:all 0.5s;
}
.left {
display:block;
height:400px;
width: 400px;
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 100% 100%;
}
.animate{
opacity:1 !important;
padding-top:50px;
}
.noanimate{
opacity:0;
padding-top:-50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image"></div>
<div class="left">
<div class="text noanimate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare.
</div>
</div>
Solution 2 - using hover function instead of mounseenter and leave
$('.image').hover(function(){
$(".text").toggleClass("animate")
});
.image {
width: 50px;
height: 50px;
display: block;
background-color: red;
}
.text {
background-color: white;
padding:40px;
transition:all 0.5s;
}
.left {
display:block;
height:400px;
width: 400px;
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 100% 100%;
}
.animate{
opacity:1 !important;
padding-top:50px;
}
.noanimate{
opacity:0;
padding-top:-50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image"></div>
<div class="left">
<div class="text noanimate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare.
</div>
</div>

Expand element and contract element with animation, according to text size

The included snippet does almost all of what I want to do.
Click on the 'Toggle expanded' to see the elements expand to the larger size and then contract to the smaller size.
I have a few questions:
How can I contract the element whilst still filling it with text (not reducing the text to two lines until the end of the animation)?
Is it possible to achieve everything without needing to set the precise width and height in CSS that I am setting? It is currently fragile to style changes.
Is it possible to animate these boxes and have the text 'animate' as well? e.g. see the text re-wrapping as the boxes increase in size
Thanks!
$('#expand-link a').on('click', function(event) {
var $sections = $('.block');
if ($sections.data('expanded')) {
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.removeClass('expanded');
$sections.find('li').each(function() {
$(this).css('height', $(this).find('p:not(.fullview)').outerHeight() + 32);
});
$sections.removeClass('expandit');
$sections.data('expanded', false);
} else {
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.addClass('expanded');
$sections.find('li').each(function() {
$(this).css('height', this.scrollHeight);
});
$sections.addClass('expandit');
$sections.data('expanded', true);
}
});
li {
list-style: none;
background-color: white;
padding: 5px 5px 5px 5px;
margin-top: 10px;
margin-bottom: 10px;
transition: height 1s ease-in-out;
overflow-x: hidden;
overflow-y: hidden;
}
.expanded li {
width: 570px;
}
li:first-child {
margin-top: 0px;
}
li:last-child {
margin-bottom: 0px;
}
.section p {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.expanded .section p {
overflow: auto;
display: block;
}
ul {
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
overflow: hidden;
}
.section p.fullview {
display: none;
}
.expanded .section p.fullview {
display: block;
}
.block {
background-color: grey;
display: inline-block;
width: 300px;
transition: width 1s ease-in-out;
}
.block.expandit {
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="expand-link">
Toggle expanded
</div>
<div class="block">
<ul class="sections">
<li class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis massa mauris. Fusce vel efficitur elit. Curabitur finibus sagittis nisl. Nullam luctus, magna sed feugiat scelerisque, nunc sem facilisis enim, sed ornare nulla urna sit amet
lectus. Praesent facilisis efficitur ipsum sed gravida. Mauris mollis ut nisi at fringilla. Aenean et orci libero. Curabitur pharetra odio ornare metus pharetra aliquet. Nunc nisl lorem, tempus vitae libero a, feugiat viverra dui.</p>
<p class="fullview">Some extra content</p>
<p class="fullview">A bit more</p>
</li>
<li class="section">
<p>Some different less useful text</p>
<p class="fullview">A bit of extra content for your information</p>
</li>
</ul>
</div>

Blur background overlay image

i want to blur the curved shape overlayed over slider that itself is a image which is a transparent png format, i want to make effect via css3 or jquery or any other.Help me out image here
this is my code
<div class="slider_overlay_menu">
<div class="overlay_menu">
<div class="banner_questions">
<select style="width: 60%;">
<option value="Career">Lorem ipsum dolor sit amet, consectetur adipiscing elit ?</option>
<option value="Subject">Curabitur at erat ornare elit tristique porttitor eget at tellus ?</option>
<option value="Stream">Fusce laoreet, tortor quis mattis congue, enim lacus vulputate tellus ?</option>
<option value="Category">Ut imperdiet egestas purus non ultricies. Sed id aliquet magna ?</option>
</select>
<input type="submit" name="commit" value="Know How !">
</div>
</div>
</div>
css
.slider_overlay_menu
{
float: right;
position:relative;
}
.slider_overlay_menu:before
{
-webkit-fliter:blur(5px);
}
.banner_questions
{
float:right;
width:825px;
text-align:center;
position:relative;
display:block;
margin-top:50px;
}
.overlay_menu input[type="submit"]
{
margin-left:30px;
vertical-align:middle;
}
.overlay_menu
{
position: absolute;
background: url('../images/banner_bg.png')no-repeat;
height: 155px;
overflow: hidden;
width: 1007px;
right: 0;
z-index: 99998;
bottom: 10px;
padding:2%;
}
Actually, my slider is responsive, its width is 100%, and the overlay green shape is also position absolute which means when we increase the page size of the browser its changes it position.
Bottom line: I want to blur the content behind the green shape.

Just add -webkit-filter property for .overlay_menu like this:
.overlay_menu
{
position: absolute;
background: url('../images/banner_bg.png')no-repeat;
height: 155px;
overflow: hidden;
width: 1007px;
right: 0;
z-index: 99998;
bottom: 10px;
padding:2%;
-webkit-filter: blur(5px);
}