I have a main div that is inside wrapper which is scrollable. Now I want to have a left div on the left side of the main div. I want the Y-Axis to scroll with the main div but when I scroll horizontally it should stick to the left of the 'wrapper`.
I hope that makes sense.
So far I have this:
.wrapper {
position: relative;
background-color: lightgray;
width: 500px;
height: 500px;
margin: 100px;
overflow: scroll;
}
.left {
position: absolute;
width: 100px;
height: 100%;
left: 0;
background: lightsalmon;
}
.main {
position: relative;
width: 1000px;
height: 1000px;
background-color: rosybrown;
}
<div class="wrapper">
<div class="main">
<div class="left">
LEFT
</div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
But I don't know how I should do the "stick to the left of wrapper" part. Is that possible with pure HTML & CSS or do I need some JavaScript for this?
Is this what you want?
Using block model:
.wrapper {
position: relative;
background-color: lightgray;
width: 500px;
height: 500px;
margin: 100px;
}
.wrapper>div {
display: inline-block;
float: left;
}
.left {
width: 100px;
height: 100%;
background: lightsalmon;
}
.main-wrapper {
width: 400px;
height: 500px;
overflow: auto;
}
.main {
width: 1000px;
height: 1000px;
background-color: rosybrown;
}
<div class="wrapper">
<div class="left">
LEFT
</div>
<div class="main-wrapper">
<div class="main">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
</div>
Can also be achieved with flexbox model:
.wrapper {
display: inline-flex;
width: 500px;
height: 500px;
margin: 100px;
}
.wrapper>div {
display: block;
}
.left {
flex: 0 0 100px;
background: lightsalmon;
}
.main-wrapper {
flex: 0 0 400px;
overflow: auto;
}
.main {
width: 1000px;
height: 1000px;
background-color: rosybrown;
}
<div class="wrapper">
<div class="left">
LEFT
</div>
<div class="main-wrapper">
<div class="main">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
</div>
Condition (for both) is taking .left outside of .main and wrapping .main in its own overflow:auto (or scroll) wrapper.
If you want both divs to scroll horizontally, I guess you need an extra wrapper:
.height-scroller {
overflow: hidden auto;
height: 500px;
width: 500px;
margin: 100px;
}
.wrapper {
display: inline-flex;
height: 1000px;
}
.left {
flex: 0 0 100px;
background: lightsalmon;
}
.main-wrapper {
flex: 0 0 400px;
overflow: auto;
}
.main {
width: 1000px;
height: 1000px;
background-color: rosybrown;
}
<div class="height-scroller">
<div class="wrapper">
<div class="left">
LEFT
</div>
<div class="main-wrapper">
<div class="main">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
</div>
</div>
I guess position: sticky is exactly what you want. (with a little flexbox)
Update: added .top as you wanted
.wrapper {
position: relative;
background-color: lightgray;
width: 500px;
height: 500px;
margin: 100px;
overflow: scroll;
}
.main {
width: 1000px;
height: 1000px;
background-color: rosybrown;
display: flex;
flex-direction: column;
}
.main .top {
position: sticky;
top: 0;
z-index: 1;
background-color: sandybrown;
}
.main .middle {
display: flex;
flex-grow: 1;
flex-direction: row;
}
.main .middle .left {
position: sticky;
width: 100px;
left: 0;
background: lightsalmon;
}
<div class="wrapper">
<div class="main">
<div class="top">
TOP
</div>
<div class="middle">
<div class="left">
LEFT
</div>
<div class="right">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
</div>
</div>
In case someone also wants top to stick to left
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
}
body{
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.main{
height: 500px;
width: 500px;
background-color: hotpink;
display: grid;
grid-template: 100px auto / 100px auto;
overflow: auto;
}
.main .top{
grid-column: 1 / span 2;
position: sticky;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
color: #fff;
padding: 20px;
width: 500px;
}
.main .left{
position: sticky;
left: 0;
background-color: rgba(0,0,0,0.3);
color: #fff;
padding: 20px;
}
.main .right{
color: #fff;
padding: 20px;
width: 1000px;
height: 1000px;
}
<div id="app">
<div class="main">
<div class="top">TOP</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</div>
</div>
You can achieve this using a fixed menu. Checkout the answer. I guess this is what you are looking for. Since the left bar is fixedpositioned, the rest will come across it. SO you need to align the main to the right.
.wrapper {
position: relative;
background-color: lightgray;
width: 500px;
height: 500px;
/*margin: 100px;*/
overflow: scroll;
}
.left {
position: fixed;
width: 100px;
height: 100%;
left: 0;
background: lightsalmon;
}
.main {
position: relative;
width: 1000px;
height: 1000px;
background-color: rosybrown;
margin-left:100px;
}
<div class="wrapper">
<div class="main">
<div class="left">
LEFT
</div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga laudantium veritatis exercitationem odio sequi, dolorem excepturi nihil placeat porro ipsum harum unde reprehenderit doloribus id blanditiis enim possimus dolore distinctio.
</div>
</div>
Related
.service1{
display: grid;
grid-template-columns: 39% 61%;
}
.s-info{
padding: 20% 10% 0 10%;
background-color: #072645;
color: white;
}
.s-info h1{
font-size: 2rem;
}
/* font-size:1rem for width 300px */
.s-info p{
font-size: 1rem;
}
.s-img img {
width: 100%;
height: 646px;
}
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="service1">
<div class="s1 s-info">
<div class="line"></div>
<h1>UX/UI Design</h1>
<p>
Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex
minima nulla voluptate autem!Lorem ipsum dolor sit amet, consectetur
a accusantium commodi ex minima nulla voluptate autem!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum,
inventore nobis!Lorem ipsum dolor sit amet, consectetur a
accusantium commodi ex minima nulla voluptate autem! Voluptate alias
esse cumque?
</p>
</div>
<div class="s-img">
<img
src="https://s3-alpha-sig.figma.com/img/bcb7/a1c5/6db72a2f9cd55704e0e140a6eb63d3b5?Expires=1646006400&Signature=caVOH5cjcYrUaZ3KO10XI1~HwKtOMJJ4BI4ZvrXxJGhblSsO4e0~7imCTNl39XAeswii-n3zx7yPcgJERp3-h-d4tE5YgvBQArJKFBKsG1rq3T43NYQcgMpIWR0apgqfWGr8xA15DAcwQLt6EXAdWCXREiWJbQf~yLBpelTqX4okY1Ib8T3~~4tjJB77btzPAA8YifULxwptCytIzVKDOXLHS6dGRXqLjkuhgQeH6sL0~BRfFVbXkW7KeYVaDxM-ZcFm3XMycaVu0zcLDXBlwFrYK4c~~eletJfTpceREFmET4HF-AVMu3Mbe6L8F7bpNjysxpQKH2aS8nswj0ykDA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt=""
srcset=""
/>
</div>
</div>
</body>
</html>
I have used css grid to make this structure.
I can't figure out how to stack image above text after a particular screen size, I thought about media query but couldn't think through it.
Please help!
Its a simple grid with 2 columns. I want to know if there is a way that when the screen size shrinks image(right side component/ 2nd item) comes above and text comes below it.
The answer, as usual, is media queries. For grids, it's changing the template columns and rows so that things are stacked as you want them.
Here I've set the breakpoint at 800px so that it would stack in Stack Overflow's normal design, but maybe not at full page.
(I also changed the way your image was displayed so that it never appears distorted; that was a personal decision. Just remove aspect-ratio and uncomment your height to get it back to normal).
.service1 {
display: grid;
grid-template-columns: 39% 61%;
}
.s-info {
padding: 20% 10% 0 10%;
background-color: #072645;
color: white;
}
.s-info h1 {
font-size: 2rem;
}
/* font-size:1rem for width 300px */
.s-info p {
font-size: 1rem;
}
.s-img img {
width: 100%;
/*height: 646px;*/
aspect-ratio: 1.977808599167822;
}
#media screen and (max-width: 800px) {
.service1 {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.s-info {
padding: 0 10%;
grid-row: 2/2;
grid-column: 1/1;
}
.s-img {
grid-row: 1/1;
grid-column: 1/1;
}
}
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="service1">
<div class="s1 s-info">
<div class="line"></div>
<h1>UX/UI Design</h1>
<p>
Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex minima nulla voluptate autem!Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex minima nulla voluptate autem!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum, inventore nobis!Lorem ipsum dolor sit amet, consectetur a accusantium commodi ex minima nulla voluptate autem! Voluptate alias esse cumque?
</p>
</div>
<div class="s-img">
<img src="https://s3-alpha-sig.figma.com/img/bcb7/a1c5/6db72a2f9cd55704e0e140a6eb63d3b5?Expires=1646006400&Signature=caVOH5cjcYrUaZ3KO10XI1~HwKtOMJJ4BI4ZvrXxJGhblSsO4e0~7imCTNl39XAeswii-n3zx7yPcgJERp3-h-d4tE5YgvBQArJKFBKsG1rq3T43NYQcgMpIWR0apgqfWGr8xA15DAcwQLt6EXAdWCXREiWJbQf~yLBpelTqX4okY1Ib8T3~~4tjJB77btzPAA8YifULxwptCytIzVKDOXLHS6dGRXqLjkuhgQeH6sL0~BRfFVbXkW7KeYVaDxM-ZcFm3XMycaVu0zcLDXBlwFrYK4c~~eletJfTpceREFmET4HF-AVMu3Mbe6L8F7bpNjysxpQKH2aS8nswj0ykDA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="" srcset="" />
</div>
</div>
</body>
</html>
Sorry it's a little confusing. You can design any responsive page you want with media queries. I gave float none for make the box above the text. You can run code snippet with full page for test it.
#media only screen and (max-width: 600px) {
.box {
background-color: yellow;
display: inline-block;
width: 400px;
height: 200px;
float: none;
margin-left: 50px;
margin-top: 20px;
}
.box p {
margin-top: 20%;
}
.container {
border: 2px solid black;
display: block;
width: 500px;
height: 450px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.container span p {
padding: 10px;
}
}
#media only screen and (min-width: 600px) {
.box {
background-color: yellow;
display: inline-block;
width: 450px;
height: 250px;
float: none;
margin-left: 50px;
margin-top: 20px;
}
.box p {
margin-top: 20%;
}
.container {
border: 2px solid black;
display: block;
width: 550px;
height: 450px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.container span p {
padding: 10px;
}
}
#media only screen and (min-width: 768px) {
.box {
background-color: yellow;
display: inline-block;
width: 550px;
height: 350px;
float: none;
margin-left: 50px;
margin-top: 20px;
}
.box p {
margin-top: 20%;
}
.container {
border: 2px solid black;
display: block;
width: 650px;
height: 550px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.container span p {
padding: 10px;
}
}
#media only screen and (min-width: 992px) {
.box {
background-color: yellow;
display: inline-block;
width: 660px;
height: 450px;
float: none;
margin-left: 50px;
margin-top: 20px;
}
.box p {
margin-top: 20%;
}
.container {
border: 2px solid black;
display: block;
width: 750px;
height: 650px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.container span p {
padding: 10px;
}
}
#media only screen and (min-width: 1200px) {
.box {
background-color: yellow;
width: 250px;
height: 250px;
float: left;
margin: 10px;
}
.box p {
margin-top: 40%;
}
.container {
border: 2px solid black;
width: 750px;
height: 270px;
margin-bottom: 20px;
}
.container span p {
padding-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<div style="text-align:center;" class="box">
<p>Box1</p>
</div>
<span>
<p class="caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda saepe ad
quibusdam optio? Nisi nostrum necessitatibus, veritatis vitae excepturi autem officia nulla quaerat
mollitia
dolorem quas ipsum in molestiae nesciunt!
Aspernatur consequuntur rem, tenetur est ab beatae, id sunt optio illum ipsum, ut adipisci libero
dolores
</p>
</span>
</div>
<div class="container">
<div style="text-align:center;" class="box">
<p>Box2</p>
</div>
<span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda saepe ad
quibusdam optio? Nisi nostrum necessitatibus, veritatis vitae excepturi autem officia nulla quaerat
mollitia
dolorem quas ipsum in molestiae nesciunt!
Aspernatur consequuntur rem, tenetur est ab beatae, id sunt optio illum ipsum, ut adipisci libero
dolores
</p>
</span>
</div>
<div class="container">
<div style="text-align:center;" class="box">
<p>Box3</p>
</div>
<span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda saepe ad
quibusdam optio? Nisi nostrum necessitatibus, veritatis vitae excepturi autem officia nulla quaerat
mollitia
dolorem quas ipsum in molestiae nesciunt!
Aspernatur consequuntur rem, tenetur est ab beatae, id sunt optio illum ipsum, ut adipisci libero
dolores
</p>
</span>
</div>
</body>
</html>
I am trying to create a horizontal scrolling website and I was following this tutorial which uses this library; however I get a "this.on is not a function" or a similar error where something is not a function.
I have tried rotating my webpage but it just messes everything up (href anchors don't work?).
I tried to bind the .mousewheel on the window as well to no avail.
Is there another way to do this or is it just not possible?
HTML
<div class="main-container">
<nav class="main-nav">
<ul class="ul__first">
<li id="logo">
b
</li>
</ul>
<ul class="ul__second">
<li id="border">Homepage</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div class="container">
<section id="section-one" class="section-one">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-two" class="section-two">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-three" class="section-three">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-4" class="section-4">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
</div>
CSS
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
html,
body,
.main-container {
scroll-behavior: smooth;
height:100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow-y:hidden;
overflow-x:hidden;
}
li {
list-style:none;
transition: all 0.4s;
z-index: 15;
}
li:hover{
transform: scale(1.1);
}
a{
text-decoration: none;
text-transform: uppercase;
color:white;
}
h1{
font-size: 70px;
text-transform: uppercase;
font-family:cursive;
letter-spacing: 10px;
}
h3 {
font-size: 30px;
font-family:fantasy;
}
p {
margin-top: 30px;
font-size: 14px;
font-family:sans-serif;
}
.main-container{
width: 100vw;
height: 100vh;
}
.main-nav {
position: fixed;
display: flex;
padding: 2em 4em;
z-index: 12;
}
.main-nav .ul__second{
position:fixed;
display: flex;
right: 4em;
}
#logo {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
}
.main-nav .ul__second li {
margin-left: 1.5em;
}
.main-nav .ul__second #border {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
align-items: center;
}
.container {
width: 400vw;
display: flex;
flex-direction: row;
}
.container .section-one{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
}
.container .summer .img {
width: 400px;
height: 600px;
}
.content {
margin-top: 50px;
margin-right: 100px;
text-align: center;
z-index: 10;
}
::-webkit-scrollbar{
display:none;
}
JS
$(function() {
$("html, body, *").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 80);
this.scrollRight -= (delta * 80);
event.preventDefault();
});
});
Sorry for the formatting!
Thank you!
The error is coming from the mousewheel library you linked to.
If you were following the tutorial you linked exactly, your issue is probably stemming from the old version of jquery (1.3.2), referenced in that tutorial.
If you update to the latest version of jquery (3.5.1) https://code.jquery.com/, you won't get that error anymore.
This is probably asked a million times, but I still cannot make it work: Whenever I use Jquery, the fadeIn(), fadeOut(), and delay()-functions doesn't work for some reason. I'm not a professional in Jquery, but I've used it a lot.
I want to make a tooltip-like div, whenever I hover over the box, it appears some time after with a fading effect. I implement my JS/ Juery at the bottom of the body (which should work), but I'm also using the Twitter Bootstrap css and it's starter template.
var rellax = new Rellax('.rellax')
var mouseX;
var mouseY;
$(document).mousemove(function(e) {
// mouse coordinates
mouseX = e.pageX;
mouseY = e.pageY;
});
$('.me').mouseover(function() {
$(this).mousemove(function() {
// show tooltip
$('.pointer').hide().delay(2000).fadeIn('slow');
$('.pointer').css({
left: mouseX,
top: mouseY
});
});
}).mouseout(function() {
// hide tooltip
$('.pointer').fadeOut('slow');
});
$(function() {
$('.me').click(function() {
console.log('Click..');
window.location = "#about_me";
});
});
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #fff;
}
.hero-image,
.front,
.name,
.portfolio,
.click_me {
position: absolute;
width: 100%;
height: 100vh;
background: url("hero.jpg") no-repeat 50% 0;
background-size: cover;
}
.front {
background: url("front_png8.png") no-repeat 50% 0;
background-size: cover;
}
.me {
width: 285px;
height: 790px;
position: absolute;
top: 16%;
left: 65%;
border: 1px solid green;
}
.me:hover {
cursor: pointer;
}
.name {
background: url("name.png") no-repeat 50% 50%;
background-size: cover;
opacity: 70%;
top: 18%;
}
.click_me {
background: url("click_me.png") no-repeat 50% 50%;
background-size: cover;
top: 10%
}
.portfolio {
background: url("portfolio.png") no-repeat 50% 50%;
background-size: cover;
opacity: 70%;
top: 14%;
}
.whitespace {
width: 100%;
height: 100vh;
}
.content {
width: 80%;
margin: 0 auto;
padding: 80px 0;
font-family: Helvetica;
}
.pointer {
position: absolute;
display: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: green;
border-radius: 50%;
pointer-events: none;
box-sizing: border-box;
transition: 10ms;
}
<div class="hero-image"></div>
<div class="rellax portfolio" data-rellax-speed="4"></div>
<div class="front"></div>
<div class="rellax click_me" data-rellax-speed="-3"></div>
<div class="rellax name" data-rellax-speed="8"></div>
<div class="me"></div>
<div class="whitespace"></div>
<div class="pointer"></div>
<div class="content">
<div id="about_me">
<h2></h2>
<p>
16 Jan 1999 I am a IT-student at Thomas More Kempen. In my spare time I play the guitar and piano and I love going out with friends. Motivation When I graduate, I would like to work for a company in the programming sector to show my creativity and designing
skills. My dream is to become a game developer and I would like to start my own company.
</p>
</div>
<div>
<h1></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ipsum iste molestiae natus quidem? Aut consequuntur doloribus eos ex expedita fugit illo iste maxime neque, officia perferendis quae quia quisquam temporibus vel veniam, voluptates! Culpa
dignissimos dolores eius eveniet, expedita ipsam, laudantium magni nostrum numquam recusandae repudiandae, ut vel! Accusamus accusantium amet aperiam blanditiis deleniti dignissimos esse est explicabo facere illum, ipsam iusto laboriosam laborum
libero maiores modi, neque nisi odit officia porro possimus praesentium provident quasi quia quis quos reiciendis repellendus repudiandae saepe, tempora vel vero voluptate voluptates. Commodi, culpa doloribus in numquam quam sequi tenetur! Cum et,
placeat?</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js" integrity="sha256-+xf9aJnHocnmrigq2hIDJGBSAnJdF5NH+Ooe5J2PHiI=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
I have made a fiddle: https://jsfiddle.net/Nick_Sch/yupxbq5r/5/ (first time using a fiddle..)
I see you have two versions of jQuery, should pick one.
You might want to use event properties on Mouse Over. I like to use .hover() instead.
Consider the following.
$(function() {
var rellax = new Rellax('.rellax');
$('.me').click(function() {
console.log('Click..');
window.location = "#about_me";
}).hover(function(e) {
// show tooltip
$(".pointer").fadeOut(1, function() {
setTimeout(function() {
$(".pointer").css({
left: e.pageX + "px",
top: e.pageY + "px"
}).fadeIn("slow");
}, 2000);
});
},
function(e) {
// hide tooltip
$('.pointer').fadeOut('slow');
});
});
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #fff;
}
.hero-image,
.front,
.name,
.portfolio,
.click_me {
position: absolute;
width: 100%;
height: 100vh;
background: url("hero.jpg") no-repeat 50% 0;
background-size: cover;
}
.front {
background: url("front_png8.png") no-repeat 50% 0;
background-size: cover;
}
.me {
width: 285px;
height: 790px;
position: absolute;
top: 16%;
left: 65%;
border: 1px solid green;
}
.me:hover {
cursor: pointer;
}
.name {
background: url("name.png") no-repeat 50% 50%;
background-size: cover;
opacity: 70%;
top: 18%;
}
.click_me {
background: url("click_me.png") no-repeat 50% 50%;
background-size: cover;
top: 10%
}
.portfolio {
background: url("portfolio.png") no-repeat 50% 50%;
background-size: cover;
opacity: 70%;
top: 14%;
}
.whitespace {
width: 100%;
height: 100vh;
}
.content {
width: 80%;
margin: 0 auto;
padding: 80px 0;
font-family: Helvetica;
}
.pointer {
position: absolute;
display: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: green;
border-radius: 50%;
pointer-events: none;
box-sizing: border-box;
transition: 10ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js" integrity="sha256-+xf9aJnHocnmrigq2hIDJGBSAnJdF5NH+Ooe5J2PHiI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="hero-image"></div>
<div class="rellax portfolio" data-rellax-speed="4"></div>
<div class="front"></div>
<div class="rellax click_me" data-rellax-speed="-3"></div>
<div class="rellax name" data-rellax-speed="8"></div>
<div class="me"></div>
<div class="whitespace"></div>
<div class="pointer"></div>
<div class="content">
<div id="about_me">
<h2></h2>
<p>16 Jan 1999 I am a IT-student at Thomas More Kempen. In my spare time I play the guitar and piano and I love going out with friends. Motivation When I graduate, I would like to work for a company in the programming sector to show my creativity and
designing skills. My dream is to become a game developer and I would like to start my own company.</p>
</div>
<div>
<h1></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ipsum iste molestiae natus quidem? Aut consequuntur doloribus eos ex expedita fugit illo iste maxime neque, officia perferendis quae quia quisquam temporibus vel veniam, voluptates! Culpa
dignissimos dolores eius eveniet, expedita ipsam, laudantium magni nostrum numquam recusandae repudiandae, ut vel! Accusamus accusantium amet aperiam blanditiis deleniti dignissimos esse est explicabo facere illum, ipsam iusto laboriosam laborum
libero maiores modi, neque nisi odit officia porro possimus praesentium provident quasi quia quis quos reiciendis repellendus repudiandae saepe, tempora vel vero voluptate voluptates. Commodi, culpa doloribus in numquam quam sequi tenetur! Cum et,
placeat?
</p>
</div>
</div>
See More: https://api.jquery.com/hover/
I'm trying to learn how to create a testimonials part on my page and somehow none of its contexts are showing up, no mater what I write.
I also tried to create an empty project with nothing inside, import all the text and still not show up. showing nothing but a blank page.
I'm new to HTML so am I doing something wrong?
So this is my index.html page
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="images/img-1.jpg">
</div>
<h3 class="title">Williamson</h3>
<span class="post">Web Developer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa
dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis
placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
awdawdaw
daw
dawdaw
d
</div>
<div class="testimonial">
<div class="pic">
<img src="images/img-2.jpg">
</div>
<h3 class="title">Kristina</h3>
<span class="post">Web Designer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa
dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis
placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#testimonial-slider").owlCarousel({
items: 1,
itemsDesktop: [1000, 1],
itemsDesktopSmall: [979, 1],
itemsTablet: [768, 1],
pagination: true,
transitionStyle: "backSlide",
autoPlay: true
});
});
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js">
</script>
style.css is this
.demo {
background: #3d3d3d;
}
.testimonial {
padding: 35px 50px;
margin: 0 20px 30px;
border-radius: 0 70px 0 70px;
border: 5px solid #ffc33c;
border-left: none;
border-right: none;
text-align: center;
}
.testimonial .pic {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
overflow: hidden;
}
.testimonial .pic img {
width: 100%;
height: auto;
}
.testimonial .title {
display: block;
margin: 0 0 7px 0;
font-size: 20px;
font-weight: 600;
color: #ffc33c;
letter-spacing: 1px;
text-transform: uppercase;
}
.testimonial .post {
display: block;
font-size: 15px;
color: #fff;
text-transform: capitalize;
margin-bottom: 20px;
}
.testimonial .description {
font-size: 16px;
color: #fff;
line-height: 30px;
}
.owl-theme .owl-controls {
margin-top: 0;
}
.owl-theme .owl-controls .owl-page span {
background: #fff;
opacity: 0.8;
transition: all 0.3s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span {
background: #ffc33c;
}
Hey you did not put the script tags inside the body also you need to lead libraries like jQuery before executing your own code:
.demo {
background: #3d3d3d;
}
.testimonial {
padding: 35px 50px;
margin: 0 20px 30px;
border-radius: 0 70px 0 70px;
border: 5px solid #ffc33c;
border-left: none;
border-right: none;
text-align: center;
}
.testimonial .pic {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
overflow: hidden;
}
.testimonial .pic img {
width: 100%;
height: auto;
}
.testimonial .title {
display: block;
margin: 0 0 7px 0;
font-size: 20px;
font-weight: 600;
color: #ffc33c;
letter-spacing: 1px;
text-transform: uppercase;
}
.testimonial .post {
display: block;
font-size: 15px;
color: #fff;
text-transform: capitalize;
margin-bottom: 20px;
}
.testimonial .description {
font-size: 16px;
color: #fff;
line-height: 30px;
}
.owl-theme .owl-controls {
margin-top: 0;
}
.owl-theme .owl-controls .owl-page span {
background: #fff;
opacity: 0.8;
transition: all 0.3s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span {
background: #ffc33c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="images/img-1.jpg">
</div>
<h3 class="title">Williamson</h3>
<span class="post">Web Developer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
awdawdaw daw dawdaw d
</div>
<div class="testimonial">
<div class="pic">
<img src="images/img-2.jpg">
</div>
<h3 class="title">Kristina</h3>
<span class="post">Web Designer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
$("#testimonial-slider").owlCarousel({
items: 1,
itemsDesktop: [1000, 1],
itemsDesktopSmall: [979, 1],
itemsTablet: [768, 1],
pagination: true,
transitionStyle: "backSlide",
autoPlay: true
});
});
</script>
</body>
</html>
You should import your libraries before using them. Just change the order of <script> tags.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
pagination:true,
transitionStyle:"backSlide",
autoPlay:true
});
});</script>
Currently I'm working on a header that looks like a broken mirror, to accomplish this task I'm using pseudo elements that repeats the same background image of their parent and setting the background attachment to fixed, additionally I'm using the skew transform property so that it has a scroll parallax effect along with the mirror effect that it performs.
The problem is that when I scroll the page down the pseudo elements' backgrounds reveal a white space. How can I fix that?
The codepen link and images follows:
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-size: 100%;
font-family: "Roboto";
text-decoration: none;
box-sizing: border-box;
}
html, body { height: 100%; }
.mirror-header {
width: 100%;
height: 100%;
position: relative;
background: url("http://res.cloudinary.com/dq5anctrd/image/upload/v1496258351/music-1970040_960_720_nqa715.jpg") no-repeat top fixed / cover;
}
.mirror-header:before,
.mirror-header:after {
content: "";
height: 200px;
position: absolute;
background-color: red;
background: inherit;
}
.mirror-header:before {
left: 0;
transform: skewY(13deg);
bottom: -80px;
width: 50%;
box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.6);
}
.mirror-header:after {
right: 0px;
width: 60%;
height: 280px;
transform: skewY(-10deg);
bottom: -50px;
box-shadow: -2px 2px 14px rgba(0, 0, 0, 0.8);
}
main .content {
width: 100%;
padding: 200px 40px 40px;
}
main .content h2 {
text-align: center;
font-size: 3em;
}
main .content p {
margin-top: 20px;
text-align: justify;
}
<header class="mirror-header">
</header>
<main>
<section class="content">
<h2>Some Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quis odit sunt, est, excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo! Excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo</p>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
Scroll position bug IMAGE
Codepen Link
Fun one!
You need to set your transform-origin for the pseudo elements that you're skewing or the backgrounds won't display correctly during off-screen rendering. (As you discovered.)
For Example:
.mirror-header:after {
...
transform-origin: 0% 100%;
}
.mirror-header:before {
...
transform-origin: 100% 100%;
}
After doing this, you'll need to readjust the placement of the pseudo-elements to your liking.
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-size: 100%;
font-family: "Roboto";
text-decoration: none;
box-sizing: border-box;
}
html, body { height: 100%; }
.mirror-header {
width: 100%;
height: 100%;
position: relative;
background: url("http://res.cloudinary.com/dq5anctrd/image/upload/v1496258351/music-1970040_960_720_nqa715.jpg") no-repeat top fixed / cover;
}
.mirror-header:before,
.mirror-header:after {
content: "";
height: 200px;
position: absolute;
background-color: red;
background: inherit;
}
.mirror-header:before {
left: 0;
transform: skewY(13deg);
bottom: -180px;
width: 50%;
box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.6);
transform-origin: 100% 100%;
}
.mirror-header:after {
right: 0px;
width: 60%;
height: 280px;
transform: skewY(-10deg);
bottom: -150px;
box-shadow: -2px 2px 14px rgba(0, 0, 0, 0.8);
transform-origin: 0% 100%;
}
main .content {
width: 100%;
padding: 200px 40px 40px;
}
main .content h2 {
text-align: center;
font-size: 3em;
}
main .content p {
margin-top: 20px;
text-align: justify;
}
<header class="mirror-header">
</header>
<main>
<section class="content">
<h2>Some Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quis odit sunt, est, excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo! Excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo</p>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
Working Codepen forked from your original example.
Aside: Personally, I'd try to use perspective/rotateY for this instead of skewY as it could possibly give you a more "natural" distortion effect for your mirror shards, but that's my $.02.