Can anyone help with the weird gap between the "arrow wrapper 2" div and "about" div as i dont understand why its there and where it is coming from. As i need the arrow at the bottom of the "about" div but i cannot use absolute as that messes everything up. So i tried making a wrapper but it is not 100vh of the div, weirdly. Any help would be amazing!!
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
#import "compass/css3";
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: 'Josefin Sans', sans-serif;
}
#main{
width:100%;
height:100vh;
background:#ED4C67;
text-align: center;
display: block;
}
/* Typewriter */
.typewrite{
color:#fff;
text-decoration:none;
font-family: 'Josefin Sans', sans-serif;
font-size:60px;
display:block;
}
/* arrow */
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
i {
display: block;
color: #fff;
}
.arrow {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 60px;
}
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#about {
width:100%;
height:100vh;
background: white;
display:block;
}
.wrapper {
height: 100%;
vertical-align: middle;
display: table-cell;
text-align: center;
}
.skull {
width:50%;
float:left;
}
.about_para {
display:block;
color:#ED4C67;
font-size:40px;
}
#media only screen and (max-width: 700px) {
}
.vertical-center {
position: relative;
top:50%;
left: 0%;
transform:translate(0%, -50%);
-webkit-transform:translate(0%, -50%);
}
.arrow2 {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 60px;
}
#portfolio {
width:100%;
height:100vh;
background:#ED4C67;
display:block;
position:bottom;
}
.wrappert {
height: 100%;
width: 100%;
display: table;
}
.arrow-wrapper {
position: relative;
}
.arrow-wrapper-2 {
position: relative;
height:100vh;
}
<!DOCTYPE html>
<html>
<head>
<title>JAKUB ORZEG-WYDRA</title>
<link rel="stylesheet" type="text/css" href="main.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script src="main.js"></script>
<div id="main">
<div class="wrappert">
<div class="wrapper">
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Jakub Orzeg-Wydra.", "Im a web designer.", "and a Media Producer." ]'>
</a>
</h1>
</div> </div>
<div class="arrow-wrapper"><div class="arrow bounce"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></div></div>
</div>
<div id="about">
<div class="vertical-center">
<center><p class="about_para">I am a 15 year old from scotland who <br>
loves to code and produce media like <br>
videos. I also love sports and fitness.</p></center></div>
<div class="arrow-wrapper-2"><div class="arrow2 bounce"><i class="fa fa-angle-down fa-5x" aria-hidden="true" style="color:red;"></i></div></div>
</div>
<div id="portfolio">
</div>
</body>
</html>
It's simple, in that section you have two element. The first one with the height of it's content and the second one with 100vh and both are in-flow elements (as the first one is only set to position:relative) so if you do the total you have more than 100vh. That's why the arrow that belong to 100vh section is outside.
If we refer to the documentation:
relative
The element is positioned according to the normal flow of the
document, and then offset relative to itself based on the values of
top, right, bottom, and left. The offset does not affect the position
of any other elements; thus, the space given for the element in the
page layout is the same as if position were static.
To fix this you need to use absolute position with the first element (remove it from the flow so no more height considered) and make its parent relative position.
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
#import "compass/css3";
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: 'Josefin Sans', sans-serif;
}
#main {
width: 100%;
height: 100vh;
background: #ED4C67;
text-align: center;
display: block;
}
/* Typewriter */
.typewrite {
color: #fff;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
font-size: 60px;
display: block;
}
/* arrow */
#-moz-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
i {
display: block;
color: #fff;
}
.arrow {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 60px;
}
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#about {
width: 100%;
height: 100vh;
background: white;
display: block;
position:relative;
}
.wrapper {
height: 100%;
vertical-align: middle;
display: table-cell;
text-align: center;
}
.skull {
width: 50%;
float: left;
}
.about_para {
display: block;
color: #ED4C67;
font-size: 40px;
text-align:center;
}
#media only screen and (max-width: 700px) {}
.vertical-center {
position: absolute;
top: 50%;
left: 0;
right:0;
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
}
.arrow2 {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 60px;
}
#portfolio {
width: 100%;
height: 100vh;
background: #ED4C67;
display: block;
position: bottom;
}
.wrappert {
height: 100%;
width: 100%;
display: table;
}
.arrow-wrapper {
position: relative;
}
.arrow-wrapper-2 {
position: relative;
height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
<title>JAKUB ORZEG-WYDRA</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script src="main.js"></script>
<div id="main">
<div class="wrappert">
<div class="wrapper">
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Jakub Orzeg-Wydra.", "Im a web designer.", "and a Media Producer." ]'>
</a>
</h1>
</div>
</div>
<div class="arrow-wrapper">
<div class="arrow bounce">
<i class="fa fa-angle-down fa-5x" aria-hidden="true"></i>
</div>
</div>
</div>
<div id="about">
<div class="vertical-center">
<p class="about_para">I am a 15 year old from scotland who <br> loves to code and produce media like <br> videos. I also love sports and fitness.</p>
</div>
<div class="arrow-wrapper-2">
<div class="arrow2 bounce">
<i class="fa fa-angle-down fa-5x" aria-hidden="true" style="color:red;"></i>
</div>
</div>
</div>
<div id="portfolio">
</div>
</body>
</html>
Related
So I have a rotating pyramid which has text and a button on each face, but the buttons are unresponsive due to overlapping divs.
Is there any way to make the buttons clickable in the rotating pyramid ?
-sorry for the ugly code, it's only a prototype.
body {
padding-top: 230px;
}
.tetra {
position: relative;
transform-origin: 50% 56%;
width: 700px;
padding-bottom: 606.21px;
/* height of equilateral triangle = sin60° * width */
margin: 0 auto;
transform-style: preserve-3d;
transition: transform 1s;
}
.tetra div {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
transform-style: preserve-3d;
-webkit-clip-path: polygon(50% 0, 100% 100%, 0% 100%);
clip-path: polygon(50% 0, 100% 100%, 0% 100%);
}
/* Rotation of –109.5° is angle(C, M[AB], D), per http://www.f-lohmueller.de/pov_tut/geo/geom_200e.htm, 180° – atan(2 * sqrt(2)) ≈ 109.5° */
.tetra .face2 {
transform-origin: 0% 100%;
transform: rotate(-60deg) rotatex(-109.5deg);
background: rgb(190, 0, 0);
}
.tetra .face3 {
transform-origin: 100% 100%;
transform: rotate(60deg) rotatex(-109.5deg);
background-color:blue;
}
.tetra .face4 {
transform-origin: 50% 100%;
transform: rotate(180deg) rotatex(-109.5deg);
background: rgb(76, 190, 0);
}
.tetra .face4 p {
transform: scale(-1, 1);
top: 60%;
left: 50%;
text-align: center;
width: 93px;
margin: 0px;
position: relative;
font-size: 30px;
position: relative;
font-weight: bold;
}
.tetra .face2 p {
transform: scale(-1, 1);
font-size: 30px;
text-align: center;
top: 60%;
left: 50%;
position: relative;
width: 93px;
margin: 0px;
font-weight: bold;
}
.tetra .face3 p {
transform: scale(-1, 1);
font-size: 30px;
text-align: center;
top: 60%;
left: 45%;
position: relative;
width: 40%;
font-weight: bold;
}
#keyframes rotate {
0% {
transform: rotatex(90deg) rotateY(0deg) rotatez(0deg);
}
100% {
transform: rotatex(90deg) rotateY(0deg) rotatez(360deg);
}
}
<html>
<head>
<link rel="stylesheet" href="pyramid.css">
</head>
<div style="height:100px;" onmousedown="spin()">
<div class="tetra">
<div class="face1"></div>
<div class="face2">
<p>TEXTFACE2<button onclick="window.Open(cube.html)">buttonface2</button></p>
</div>
<div class="face4">
<p>TEXTFACE3<button onclick="window.Open(cube.html)">buttonface4</button></p>
</div>
<div class="face3" "><p>TEXTFACE3<button onclick="window.Open(cube.html) "">buttonface3</button>
</p>
</div>
</div>
</div>
<script>
let rotation = 0;
function spin() {
const collection = document.getElementsByClassName("tetra");
collection[0].style.transform = "rotatex(90deg) rotateY(0deg) rotateZ(" + rotation + "deg)";
rotation = rotation + 120;
}
</script>
<style>
.tetra {
transform: rotatex(90deg) rotateY(0deg) rotatez(0deg);
}
</style>
</html>
For a movie website I have a moving background with a grain texture to create a movie vibe.
Later in the website I want to have a :hover input, but because of the grain background it doesn't seem to work.
The background will be attached to the section and when you hover over the div with the class hover, the content from the test div need to be show up.
This is my HTML and CSS:
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section:after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
}
.test {
display: none;
color: white;
}
.hover:hover+.test {
display: block;
}
<section class="section">
<div class="hover">
</div>
<div class="test">test</div>
</section>
Here is the JSFiddle:
https://jsfiddle.net/g8dhz14j/3/
When I try the code without the .section:after, the code works. Can someone help out?
Add pointer-events: none; to the .section::after rules.
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section::after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
z-index: 0;
pointer-events: none;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
}
.blue {
display: none;
color: white;
}
.hover:hover+.blue {
display: block;
}
<section class="section">
<div class="hover">
</div>
<div class="blue">THIS IS A TEST</div>
</section>
The :after pseudo element is on top of the .hover element. You can change that by using z-index:
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section:after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 1;
}
.test {
display: none;
color: white;
}
.hover:hover + .test {
display: block;
}
<section class="section">
<div class="hover"></div>
<div class="test">THIS IS A TEST</div>
</section>
What I'm trying to achieve is the transition of the page like on this webpage - http://ejosue.com/.
So far what I have done is created a cube with an on hover effect which works pretty much like on the website. Now however I have a problem with making the cube fill the entire screen (like on the referenced webpage).
Here's the JSfiddle - https://jsfiddle.net/definaly/31zr05y7/48/
And the code on this page
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 200px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.cube:hover{
animation: pageDown 1.5s linear forwards;
}
#keyframes pageDown{
25%{
transform: scale(0.8);
}
75%{
transform: rotateX(90deg);
}
100%{
transform: scale(1);
transform: rotateX(90deg);
}
}
.cube__face {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid black;
/* Optional Styling */
line-height: 200px;
font-size: 30px;
font-weight: bold;
color: white;
text-align: center;
}
.cube__face--front {
background: hsla( 0, 100%, 50%, 1);
}
.cube__face--bottom {
background: hsla(300, 100%, 50%, 1);
}
.cube__face--front {
transform: rotateY(0deg) translateZ(100px);
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(100px);
}
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">entry page</div>
<div class="cube__face cube__face--bottom">extra page</div>
</div>
</div>
Simply make the scene element 100vh and consider 50vh inside the translation. Also remove the width to have the default full width:
body { font-family: sans-serif;margin:0; } /* Remove the default margin */
* {
box-sizing:border-box; /* to make sure there is no overflow*/
}
.scene {
height: 100vh;
}
.cube {
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.cube:hover{
animation: pageDown 1.5s linear forwards;
}
#keyframes pageDown{
25%{
transform: scale(0.8);
}
75%{
transform: rotateX(90deg);
}
100%{
transform: scale(1);
transform: rotateX(90deg);
}
}
.cube__face {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid black;
/* Optional Styling */
line-height: 200px;
font-size: 30px;
font-weight: bold;
color: white;
text-align: center;
}
.cube__face--front {
background: hsla( 0, 100%, 50%, 1);
}
.cube__face--bottom {
background: hsla(300, 100%, 50%, 1);
}
.cube__face--front {
transform: rotateY(0deg) translateZ(50vh);
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(50vh);
}
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">entry page</div>
<div class="cube__face cube__face--bottom">extra page</div>
</div>
</div>
Attempting to create a full-width owl-carousel but I keep seeing this on .owl-stage when I inspect-element on chrome:
element.style {
transform: translate3d(-1872px, 0px, 0px);
transition: 0s;
width: 7264px;
padding-left: 200px;
padding-right: 200px;
}
Initially I tried to just overwrite padding on .owl-stage, but the padding stayed the same.
I also tried setting min-width for all images to 100% and 100vw, but that hasn't worked either.
Is there anyway to adjust the padding on .owl-stage?
This is my code:
$('.owl-carousel').owlCarousel({
stagePadding: 200,
loop:true,
margin:0,
singleItem:true,
nav:true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
dots:true,
// autoplay: true,
// autoplayHoverPause: true,
responsive:{
0:{
items:1,
stagePadding: 60
},
600:{
items:1,
stagePadding: 100
},
1000:{
items:1,
stagePadding: 200
},
1200:{
items:1,
stagePadding: 250
},
1400:{
items:1,
stagePadding: 300
},
1600:{
items:1,
stagePadding: 350
},
1800:{
items:1,
stagePadding: 400
}
}
});
body {
padding: 0;
margin: 80px 0 0 0;
font-family: Merriweather;
}
.owl-carousel:after {
content: "";
display: block;
position: absolute;
width: 8%;
top: 0;
bottom: 0;
left: 50%;
margin-left: 0;
pointer-events: none;
background: url() no-repeat center 50%;
background-size: 100% auto;
}
.owl-stage{
min-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.owl-item {
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0) scale(1.0, 1.0);
}
.item {
opacity: 0.4;
transition: .4s ease all;
transform: scale(.6);
}
.item img{
display: block;
min-width: 100%;
width: auto;
height: auto;
max-height: 680px !important;
}
.active .item {
display: block;
width: 100%;
height: auto;
opacity: 1;
transform: scale(1);
max-height: 680px !important;
}
/* content and cta */
.inner {
position: absolute;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
}
/* END CTA Button*/
/* Title Animation */
.reveal-text,
.reveal-text:after {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 600ms;
animation-duration: 600ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.reveal-text {
position: relative;
-webkit-user-select: none;
user-select: none;
color:#ffe221;
text-shadow: 1px 1px #000000;
white-space: nowrap;
}
.reveal-text:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #8ce2ea;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
pointer-events: none;
}
.active .reveal-text{
-webkit-animation-name: reveal-text;
animation-name: reveal-text;
}
.active .reveal-text:after {
-webkit-animation-name: revealer-text;
animation-name: revealer-text;
}
/* Before animation */
#-webkit-keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
#keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
/* After animation */
#-webkit-keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
#keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
/* Title Animation END */
/* OWL-Carousel Navigation*/
.owl-nav div {
position: absolute;
top: 45%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: 5% !important;
}
.owl-nav .owl-next {
right: 5% !important;;
}
.owl-prev:hover, .owl-next:hover{
text-shadow: 2px 2px #000000;
transform: translateX(10%);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.owl-prev:hover{
text-shadow: -2px 2px #000000;
transform: translateX(-10%);
}
.owl-theme .owl-dots .owl-dot span{
width: 0;
}
.owl-dots {
text-align: center;
position: fixed;
margin-top: 10px;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
/* END OWL-Carousel Navigation*/
#media only screen and (max-width:768px) {
#full-width{
padding: 0;
}
.item{
transform: scale(0);
}
.item img{
height: 400px !important;
}
.active .item img{
max-height: 400px;
}
}
#media only screen and (max-width:420px) {
.item img{
height: 200px !important;
}
.active .item img{
max-height: 200px;
}
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Tanya-UI-Kit-3 Full Page Width</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
</head>
<body>
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="item">
<img src="https://bboyjplus.files.wordpress.com/2014/04/bboying-steps-2043304.jpg" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.vimeocdn.com/video/550760587.jpg?mw=1920&mh=1080&q=70" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap js-cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>
</html>
Set items: 1, stagePadding: 0 on the carousel, body { margin: 0; }, removed your styling for .owl-stage (didn't do anything), and removed the max-height you had set on the images, which would distort them with min-width: 100% specified.
$('.owl-carousel').owlCarousel({
stagePadding: 0,
items: 1,
loop:true,
margin:0,
singleItem:true,
nav:true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
dots:true
});
body {
padding: 0;
margin: 0;
font-family: Merriweather;
}
.owl-carousel:after {
content: "";
display: block;
position: absolute;
width: 8%;
top: 0;
bottom: 0;
left: 50%;
margin-left: 0;
pointer-events: none;
background: url() no-repeat center 50%;
background-size: 100% auto;
}
.owl-item {
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0) scale(1.0, 1.0);
}
.item {
opacity: 0.4;
transition: .4s ease all;
transform: scale(.6);
}
.item img{
display: block;
min-width: 100%;
width: auto;
height: auto;
}
.active .item {
display: block;
width: 100%;
height: auto;
opacity: 1;
transform: scale(1);
max-height: 680px !important;
}
/* content and cta */
.inner {
position: absolute;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
}
/* END CTA Button*/
/* Title Animation */
.reveal-text,
.reveal-text:after {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 600ms;
animation-duration: 600ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.reveal-text {
position: relative;
-webkit-user-select: none;
user-select: none;
color:#ffe221;
text-shadow: 1px 1px #000000;
white-space: nowrap;
}
.reveal-text:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #8ce2ea;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
pointer-events: none;
}
.active .reveal-text{
-webkit-animation-name: reveal-text;
animation-name: reveal-text;
}
.active .reveal-text:after {
-webkit-animation-name: revealer-text;
animation-name: revealer-text;
}
/* Before animation */
#-webkit-keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
#keyframes reveal-text {
from {
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
to {
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
/* After animation */
#-webkit-keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
#keyframes revealer-text {
0%, 50% {
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
60%, 100% {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
50% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
60% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
}
/* Title Animation END */
/* OWL-Carousel Navigation*/
.owl-nav div {
position: absolute;
top: 45%;
color: #cdcbcd;
}
.owl-nav i {
font-size: 52px;
}
.owl-nav .owl-prev {
left: 5% !important;
}
.owl-nav .owl-next {
right: 5% !important;;
}
.owl-prev:hover, .owl-next:hover{
text-shadow: 2px 2px #000000;
transform: translateX(10%);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.owl-prev:hover{
text-shadow: -2px 2px #000000;
transform: translateX(-10%);
}
.owl-theme .owl-dots .owl-dot span{
width: 0;
}
.owl-dots {
text-align: center;
position: fixed;
margin-top: 10px;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.owl-dot {
border-radius: 50px;
height: 10px;
width: 10px;
display: inline-block;
background: rgba(127,127,127, 0.5);
margin-left: 5px;
margin-right: 5px;
}
.owl-dot.active {
background: rgba(127,127,127, 1);
}
/* END OWL-Carousel Navigation*/
#media only screen and (max-width:768px) {
#full-width{
padding: 0;
}
.item{
transform: scale(0);
}
.item img{
height: 400px !important;
}
.active .item img{
max-height: 400px;
}
}
#media only screen and (max-width:420px) {
.item img{
height: 200px !important;
}
.active .item img{
max-height: 200px;
}
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Tanya-UI-Kit-3 Full Page Width</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
</head>
<body>
<div class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="item">
<img src="https://bboyjplus.files.wordpress.com/2014/04/bboying-steps-2043304.jpg" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://i.vimeocdn.com/video/550760587.jpg?mw=1920&mh=1080&q=70" alt="" />
<div class="inner">
<div class="row row-content">
<div class="col-md-12">
<div class="headline-wrap">
<h1><span class="reveal-text">H1 TITLE</span></h1>
<h2><span class="reveal-text">H2 TITLE</span></h2>
</div>
</div>
</div>
<div class="row row-cta">
<div class="col-md-12 cta-wrap js-cta-wrap">
<a class="cta-main"><span class="cta-text reveal-text">CTA-MAIN</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>
</html>
I ran into the same issue when I upgraded to version 3 of this owl-carousel.
After a few trials, I found out adding a line in CSS worked for me.
.owl-carousel .owl-stage-outer{
transform:translate3d(0,0,0)
}
Hi I was trying to get my navigation bar to collapse on smaller screen size I am trying to do this without bootstrap any suggestions?
HTML
<html>
<head>
<title></title>
<!-- CSS STYLESHEET -->
<link rel="stylesheet" type="text/css" href="index.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat|Black+Ops+One|Luckiest+Guy|Montez|Courgette|Slackey|Fontdiner+Swanky|Permanent+Marker|Aclonica|Lobster" rel='stylesheet' type='text/css'>
<!-- JavaScript's -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<script type="text/javascript">
$(function() {
// note that this doens't call hide
$('#loading').delay(3000).fadeOut('slow');
});
</script>
<body>
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div id="object"></div>
</div>
</div>
</div>
<!-- Loading Section Ends -->
<div class="header">
<nav class="nav_first">
<img class="nike" src="http://s3.amazonaws.com/nikeinc/assets/7366/Nike_Swoosh_Logo_White_original.jpg?1328660973">
<ul>
<li class="wiggle" class="wiggle" class="wiggle" class="wiggle">Home</li>
<li class="wiggle" class="wiggle" class="wiggle">About Us</li>
<li class="wiggle" class="wiggle">Shop</li>
<li class="wiggle">Contact</li>
</ul>
</nav>
</div>
<div class="wrapper">
<div>
<h1 id="nike_text">Nike</h1>
</div>
</div>
</body>
</html>
CSS
body {
width: auto;
height: auto;
font-size:14px;
margin:0;
background-color:black;
}
#loading {
display:none;
background-color: #bd4932;
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
margin-top: 0px;
top: 0px;
}
#loading-center{
width: 100%;
height: 100%;
position: relative;
}
#loading-center-absolute {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#object{
width: 80px;
height: 80px;
background-color: #FFF;
-webkit-animation: animate 1s infinite ease-in-out;
animation: animate 1s infinite ease-in-out;
margin-right: auto;
margin-left: auto;
margin-top: 60px;
}
#-webkit-keyframes animate {
0% { -webkit-transform: perspective(160px); }
50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}
#keyframes animate {
0% {
transform: perspective(160px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg);
} 50% {
transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
} 100% {
transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
}
}
/* SASU - Navigation Bar */
.nav_first{
overflow:none;
list-style-type:none;
margin:0;
padding:0;
text-align:center;
}
.nav_first li{
display:inline;
}
.nav_first a{
margin-top:25px;
font-size: 30px;
letter-spacing: 3px;
font-weight:900;
margin-left:40px;
margin-right:40px;
font-family: 'Montserrat';
text-decoration: none;
display:inline-block;
padding:10px;
}
.nav_first a:hover {
color:white;
font-size:35px;
}
#-webkit-keyframes wiggle {
0% {
-webkit-transform:rotate(4deg);
}
50% {
-webkit-transform:rotate(-4deg);
}
100% {
-webkit-transform:rotate(4deg);
}
}
.wiggle:hover {
-webkit-animation: wiggle 0.5s infinite;
}
.active {background-color:orangered;}
img{
float:left;
margin:0 auto;
padding:0 auto;
}
/* Middle Section */
.nike {
display: block;
margin:auto;
height:115px;
}
#nike_text {
font-family:'Montez';
font-size:80px;
text-align: center;
color:white;
margin:auto;
letter-spacing: 2px;
}