How to resize div based on screen resolution

How to resize div based on screen resolution - javascript

I am creating a landing page with some interesting idea of menu. It is built with custom made hexagons. I want to make these hexacgons to fill all screen based on screen resolution. Basically i want to make them adapt to screen with no need to scroll.
my website: http://new.glstudios.lv/
<div class='grid'>
<div onclick="location.href='';" id="smallbox" ; class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Snowy Hills</h2>
<div class='desc'>Photo by Ales Krivec</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Bear</h2>
<div class='desc'>Photo by Thomas Lefebvre</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Owl</h2>
<div class='desc'>Photo by photostockeditor</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Horse</h2>
<div class='desc'>Photo by Annie Spratt</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url();'></div>
<div class='container'>
<h2>Ice & Penguin</h2>
<div class='desc'>Photo by Teodor Bjerrang</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url( );'></div>
<div class='container'>
<h2>Pile of Logs</h2>
<div class='desc'>Photo by Ales Krivec</div>
</div>
</div>
<div class='grid--item'>
<div class='img' style='background-image: url( );'></div>
<div class='container'>
<h2>Winter Tree</h2>
<div class='desc'>Photo by Mikael Kristenson</div>
</div>
</div>
</div>
And my CSS.
#smallbox {
cursor: pointer;
}
.x-main.full {
float: none;
display: block;
width: auto;
background:black;
}
#import url(https://fonts.googleapis.com/css?family=Arapey:400italic);
body {
background: white;
-webkit-font-smoothing: antialiased;
min-width: 1200px;
}
.grid {
padding: 60px;
margin: 0 auto;
max-width: 1200px;
}
.grid--item {
position: relative;
margin-top: -90px;
margin-right: 5px;
margin-left: 5px;
width: calc(33.33% - 10px);
float: left;
transition: all 0.5s;
overflow: hidden;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.grid--item:before {
display: block;
padding-top: 112.5%;
content: '';
}
.grid--item:nth-child(1), .grid--item:nth-child(2) {
margin-top: 0;
}
.grid--item:nth-child(7n - 1), .grid--item:nth-child(1) {
margin-left: 185px;
}
.img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: center center;
background-size: cover;
overflow: hidden;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.img:before, .img:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
opacity: 0;
transition: opacity 0.5s;
}
.img:before {
background: rgba(128, 0, 128, 0.25);
}
.img:after {
background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5), transparent);
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
opacity: 0;
text-align: center;
color: white;
will-change: transform;
backface-visibility: hidden;
transform: translate(-50%, -50%) scale(0.9);
transition: all 0.5s;
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
h1,
h2 {
font-family: 'Arapey';
font-style: italic;
font-weight: 400;
}
h1 {
margin-top: 90px;
text-align: center;
font-size: 56px;
color: white;
}
h2 {
font-size: 32px;
color:white;
}
h2:before, h2:after {
display: inline-block;
margin: 0 0.5em;
width: 0.75em;
height: 0.03em;
background: turquoise;
content: '';
vertical-align: middle;
transition: all 0.3s;
}
.desc {
margin: 1em 0 0;
font-family: 'ATC Overlook';
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
line-height: 1.5;
color: turquoise;
}
.grid--item:hover .img:before,
.grid--item:hover .img:after,
.grid--item:hover .container {
opacity: 1;
}
.grid--item:hover .container {
transform: translate(-50%, -50%) scale(1);
}

Assuming your HTML is something like this:
<div id="test-div"></div>
You could do this:
$(window).resize(function() {
$('#test-div').css('width', $(window).width());
$('#test-div').css('height', $(window).height());
});
But it's very hard to tell without you posting your actual HTML/Javascript code.

You could also try adding style="overflow:auto" after the divider tag.

I'm thinking you may want to use javascript or jquery to alter the css on resize.
Something along the lines of:
$(window).resize(function() {
$('.container').css('transform','translate(-50%, -50%) scale(dynamicvaluehere);');
});
You'll want to calculate your dynamicvaluehere variable based on window height and window width.

Related

Navigation bar hover effect - CSS

I am working on a navigation bar. I have uploaded an image in which I have made a red circle. I have to make that shape. How can I make it? How can I create this kind of shape in a single div
Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>CSS Shape</title>
<style>
.triangletwo {
width:100px;
height:100px;
display:inherit;
opacity:0;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
clip-path: polygon(100% 0, 0 0%, 50% 80%);
}
</style>
</head>
<body>
<div style="width: 200px; height: 200px; overflow: hidden; margin: 0px; display: inline-block; clip-path: polygon(100% 0, 0 0%, 50% 80%);">
</div>
<div style="width: 100px; height: 100px; overflow: hidden; background: #6d74a3; margin-left:-100px; display: inline-block;clip-path: polygon(50% 0, 0 80%, 100% 80%);">
</div>
<div style="width: 100px; height: 100px; overflow: hidden; background: #6d74a3; margin-left:-42px; margin-bottom: -20px; display: inline-block; clip-path: polygon(100% 0, 0 0%, 50% 80%);">
<div class="triangletwo" style="display: inline-block;"></div>
</div>
</body>
</html>

Yes, you can create it using a div with text inside. Hope this help
.single-div {
background-color: #a224a2;
color: white;
font-size: 25px;
width: 150px;
height: 100px;
position: relative;
clip-path: polygon(30% 0, 40% 25%, 100% 25%, 70% 99%, 60% 76%, 0 75%);
display: flex;
}
.text {
margin: auto;
}
<div class="single-div">
<span class="text">Home</span>
</div>

How do start CSS animation on click?

I'm fairly new to front-end dev so please spare me...Anyway, for this codepen project I'm trying to get the animation where a stack of pancakes falls to the plate to activate when you click the button. It should be just an empty plate until the button is clicked.
Not sure why my JS code isn't working but if I target the pancake or stack class, the visuals still remain static.
HTML:
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button onclick="onclick()">Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>
CSS (snippet):
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
JS:
$(function() {
$('button').onclick(function() {
$('.pancake').addClass('slideIn');
});
})

There are a bunch of things are not right, I've fixed them and marked them with FIX
$(function() {
$('button').click(function() {
// FIX: you forgot the dot
$('.pancake').addClass('slideIn');
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
/* FIX: Pause the animation on start */
animation-play-state: paused;
}
/* FIX: Resume the animation when this class is added */
.slideIn {
animation-play-state: running;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<!-- FIX: You forgot to import the jquery in CodePen! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<!-- FIX: You don't need to bind function here since you've already done it in js.-->
<button>Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>

the class identifier is wrong it should be $(".pancake")
$(function() {
$('button').onclick(function() {
$('.pancake').addClass('slideIn');
});
})
javascript

You need to add the class identifier . in $(".pancake")
$(function() {
$('button').click(function() {
$('.pancake').addClass('slideIn');
});
})
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button>Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>

Use following js (i remove animation from css .pancake class and add transform: translateY(-1000px); to it)
function onClick() {
[...document.querySelectorAll('.pancake')]
.map(x=> x.classList.add('slideIn'));
}
function onClick() {
[...document.querySelectorAll('.pancake')].map(x=> x.classList.add('slideIn'));
}
#import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
* {
outline: none;
/*NOTE: removing the blue outline for links and buttons is a terrible UI/UX decision for accessibility! Some folks do not have the motor skills to use a mouse and use the alternative Tab button instead. This is purely just for show and practice :-) */
}
body {
position: relative;
height: 100vh;
padding: 0;
margin: 0;
background: #FDF6D0;
display: flex;
align-items: center;
text-align: center;
}
.container{
position: absolute;
margin-top: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
align-items: center;
}
/*------BUTTON------*/
button {
display: inline-block;
border: none;
margin-top: 25%;
padding: 1em 2em;
/*CSS center element trick*/
position: absolute;
/* Gradient */
background: linear-gradient(90deg, #FF5F6D 0%, rgba(255, 195, 113, 0.88) 100%);
box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
border-radius: 40px;
/*text*/
position: relative;
text-transform: uppercase;
font-family: Montserrat, system-ui;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 15px;
letter-spacing: 0.14px;
color: #fff;
cursor: pointer;
transition: all 0.1s linear;
}
button:hover {
transform: translateY(-6px);
background: linear-gradient(90deg, #FF777C 0%, #FFC487 100%);
box-shadow: 0px 6px 5px rgba(255, 95, 109, 0.25);
}
.plate {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(165, 75, 75, 0.15);
}
.inner-plate {
position: relative;
width: 75%;
height: 30px;
background: #FFFFFF;
/* Stroke */
border: 1.25px solid #F9EADC;
border-radius: 50%;
margin: 5px auto; /*stacked "plates" without flexboxes*/
}
/*------ELEMENTS TO ANIMATE------*/
.pancake {
display: inline-block;
position: absolute;
width: 65%;
height: 25%;
left: 18%;
top: 0;
background: #FFE68E;
border-radius: 50%;
z-index: 1;
/*pancakes falling*/
transform: translateY(-1000px);
}
.top-p {
position: absolute;
width: 95%;
height: 80%;
left: 2.25%;
background: linear-gradient(180deg, rgba(222, 159, 101, 0.75) 0%, #E09148 100%);
border-radius: 50%;
}
.p2 {
z-index: 2;
top: -7%;
left: 18%;
}
.p3 {
z-index: 3;
top: -14%;
left: 18%;
}
.p4 {
z-index: 4;
top: -21%;
left: 18%;
}
.p5 {
z-index: 5;
top: -28%;
left: 18%;
}
.p6 {
z-index: 6;
top: -35%;
left: 18%;
}
/*BUTTER*/
.shadow {
position: absolute;
z-index: 8;
top: -7%;
left: 42%;
height: 30%;
width: 15%;
margin: auto;
background: #FFDE68;
border-radius: 1px;
box-shadow: 1px 2px 2px rgba(202, 133, 65, 0.75);
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.top-b {
position: absolute;
z-index: 9;
top: -10%;
left: 45%;
height: 25%;
width: 10%;
margin: auto;
background: #FFEFB5;
border-radius: 1px;
transform: matrix(0.74, -0.44, 0.98, 0.77, 0, 0);
}
.shine{
position: absolute;
z-index: 10;
top: -4%;
left: 49%;
height: 7%;
width: 4%;
margin: auto;
background: #FFF;
border-radius: 1px;
transform: rotate(45deg);
}
.slideIn {
-webkit-animation: slideIn 1s linear both;
animation: slideIn 1s linear both;
}
/*------ KEYFRAMES -----*/
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
<div class="container">
<div class="plate">
<div class="inner-plate">
</div>
</div>
<button onclick="onClick()">Good Morning!</button>
<div class="stack">
<div class="pancake">
<div class="top-p"></div>
</div>
<div class="pancake p2">
<div class="top-p"></div>
</div>
<div class="pancake p3">
<div class="top-p"></div>
</div>
<div class="pancake p4">
<div class="top-p"></div>
</div>
<div class="pancake p5">
<div class="top-p"></div>
</div>
<div class="pancake p6">
<div class="top-p"></div>
<div class="butter">
<div class = "shadow"></div>
<div class = "top-b"></div>
<div class = "shine"></div>
</div>
</div>
</div>

How can I create a single page vertical page turn effect

I want to create a calendar like set of 12 images that appear to flip up when clicked. I know about turn.js but I don't know enough javascript to start from scratch. I do have a programming background and am willing to learn but don't know where to start.
http://pageflip-books.com/index.php#ppp/page/1
is something like what I'm looking for but I want to show the top pages not the bottom ones.
Most of the examples I have found are for books/magazines with two pages side by side.
Thanks for any pointers.

I would look into CSS animations if I were you. An example can be found here: https://codepen.io/ryrocks/pen/zovXWy
HTML
<!-- https://cssdeck.com/labs/pure-css3-page-flip-effect -->
<div id="all">
<div id="page-flip">
<div id="r1">
<div id="p1">
<div>
<div></div>
</div>
</div>
</div>
<div id="p2">
<div></div>
</div>
<div id="r3">
<div id="p3">
<div>
<div></div>
</div>
</div>
</div>
<div class="s">
<div id="s3">
<div id="sp3"></div>
</div>
</div>
<div class="s" id="s4">
<div id="s2">
<div id="sp2"></div>
</div>
</div>
<a id="coke" href="#" title="Pure CSS Coke Can"></a>
<a id="meninas" href="#" title="CSS 3D Meninas"></a>
</div>
</div>
CSS
body {
padding: 0;
margin: 0;
}
#all {
width: 680px;
margin-left: auto;
margin-right: auto;
}
#page-flip {
background-image: url(https://cssdeck.com/uploads/media/items/6/6h4pDpK.jpg);
position: absolute;
padding: 40px 40px 40px 340px;
width: 300px;
height: 400px;
overflow: hidden;
}
#r1 {
position: absolute;
z-index: 2;
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
}
#p1 {
width: 1285px;
height: 1388px;
overflow: hidden;
}
#p1 > div {
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1030px, 500px) rotate(32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
width: 285px;
height: 388px;
background-image: url(https://cssdeck.com/uploads/media/items/8/87WOlJH.jpg);
}
#p1 > div > div {
width: 10px;
height: 388px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
}
#p2 > div {
width: 285px;
height: 388px;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
position: absolute;
z-index: 1;
background-image: url(https://cssdeck.com/uploads/media/items/4/4FpEEbu.jpg);
}
#r3 {
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 2;
}
#s3 {
-webkit-transform-origin: 70px 500px;
-webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 1;
}
#page-flip:hover #s3 {
-webkit-transform-origin: 325px 500px;
-webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3 {
width: 25px;
height: 1000px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
overflow: hidden;
}
#page-flip:hover #sp3 { width: 11px }
.s {
width: 285px;
height: 388px;
position: absolute;
overflow: hidden;
z-index: 3;
}
#s2 {
-webkit-transform-origin: 45px 500px;
-webkit-transform: translate(240px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
}
#sp2 {
width: 15px;
height: 1000px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));
overflow: hidden;
}
#s4 {
opacity: 1;
-webkit-transition-duration: 0.5s;
}
#page-flip:hover #s4 { opacity: 0 }
#page-flip:hover #s2 {
-webkit-transform-origin: 300px 500px;
-webkit-transform: translate(-15px, -500px) rotate(0deg);
}
#p3 {
width: 1285px;
height: 1388px;
overflow: hidden;
}
#p3 > div {
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1255px, 500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
width: 285px;
height: 388px;
background-image: url(https://cssdeck.com/uploads/media/items/6/6S8oF28.jpg);
overflow: hidden;
}
#p3 > div > div {
width: 9px;
height: 500px;
float: right;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));
}
#page-flip:hover #r1 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div {
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div {
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1000px, 500px) rotate(0deg);
}
a {
display: block;
position: absolute;
margin: -20000px 0 0 0;
padding: 1px;
z-index: 3;
-webkit-transition-property: margin;
-webkit-transition-duration: 0.01s;
}
#coke {
width: 253px;
height: 158px;
}
a:hover {
padding: 0;
border: 1px dotted #92C7C1;
}
#page-flip:hover #coke {
-webkit-transition-delay: .8s;
margin: 33px 0 0 14px;
}
#meninas {
width: 253px;
height: 167px;
}
#page-flip:hover #meninas {
-webkit-transition-delay: .8s;
margin: 203px 0 0 14px;
}
In this example hover triggers the page flip, but you can modify that to be triggered by a Javascript click event and to show the page that you prefer when the event occurs.

Javascript altering the absolute position of an html element

I am creating a new site, and as you'll see in the code below I have put two classes (logo & text) above a background fixed position image. I have put them over the top of the image using position absolute with left 50%, top 50% and transform: translate(-50%, -50%); this worked fine with no problems and was responsive the way I had hoped for.
But, as soon as I added my JS code (fade_effect) to the site it moved the position of the two elements (logo & text) slightly. Can someone please help me, have edited the code a number of times and researched it but cannot find a solution. I believe it may have something to do with the JS code section .offset() after what I've read, this seem like the part of the JS code that would be effecting the position of these elements. Please see code below:
HTML:
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" />
<body style="height: 2000px; margin: 0; padding: 0;">
<div class="img_slide">
<h1 class="logo fade_effect">Logo Here</h1>
<p class="text fade_effect">Welcome to My Site</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
CSS:
/** Background image code BELOW **/
.img_slide {
height: 800px;
width: 100%;
background-image: linear-gradient(150deg, rgba(68, 0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
background-repeat: no-repeat;
background-position: 0%, 0%, 50%, 50%;
background-attachment: scroll, fixed;
background-size: auto, cover;
}
/** Background image code ABOVE **/
.logo {
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 60px;
color: white;
padding: 25px;
border: 3px solid white;
/* position absolute - center */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.text {
color: white;
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 25px;
padding: 10px;
/* position absolute - center */
position: absolute;
left: 50%;
top: 70%;
transform: translate(-50%, -50%);
}
/** CSS code called by the JS .addClass **/
.fade_effect {
opacity: 0;
}
.FadeIn {
-webkit-animation: slideIn 0.8s ease 0.3s forwards;
animation: slideIn 0.8s ease 0.3s forwards;
}
#-webkit-keyframes slideIn {
0%{
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
/** CSS code called by the JS .addClass **/
Javascript:
var $fade = $(".fade_effect"); //Calling the class in HTML
$(window).scroll(function () { //Using the scroll global variable
$fade.each(function () {
fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
windowBottom = $(window).scrollTop() + $(window).height();
if (fadeMiddle < windowBottom) {
$(this).addClass("FadeIn");
}
});
});
/* On Load: Trigger Scroll Once*/
$(window).scroll();
This can also be seen online via my CodePen page: https://codepen.io/billyfarroll/pen/qYWYYV

Please see the below code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" />
<style>
/** Background image code BELOW **/
.img_slide {
height: 800px;
width: 100%;
background-image: linear-gradient(150deg, rgba(68,
0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
background-repeat: no-repeat;
background-position: 0%, 0%, 50%, 50%;
background-attachment: scroll, fixed;
background-size: auto, cover;
}
/** Background
image code ABOVE **/
.logocontainer {
color: white;
padding: 0 20px;
border: 3px solid white;
position: absolute;
left: 50%;
top: 50%;
}
.logo {
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 60px;
color: white;
padding: 25px;
text-align: center;
}
.text {
color: white;
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 25px;
padding: 10px;
/* position absolute - center */
position: absolute;
left: 50%;
top: 70%;
/* transform: translate(-50%, -50%); */
}
/** CSS
code called by the JS .addClass **/
.fade_effect {
opacity: 0;
}
.FadeIn {
-webkit-animation: slideIn 0.8s ease 0.3s forwards;
animation: slideIn 0.8s ease 0.3s forwards;
}
#-webkit-keyframes slideIn {
0% {
-webkit-transform: translate(0, 40px);
opacity: 0;
}
100% {
-webkit-transform: translate(-50%, -50%);
opacity: 1;
}
}
#keyframes slideIn {
0% {
-webkit-transform: translate(0, 40px);
opacity: 0;
}
100% {
-webkit-transform: translate(-50%, -50%);
opacity: 1;
}
}
/** CSS code called by the JS .addClass **/
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="height: 2000px; margin: 0; padding: 0;">
<div class="img_slide">
<div class="logocontainer fade_effect">
<h1 class="logo">
Logo Here
</h1>
<p class="text fade_effect">
Welcome to My Site
</p>
</div>
</div>
<script>
var $fade = $(".fade_effect");
//Calling the class in HTML
$(window).scroll(function () {
//Using the scroll global variable
$fade.each(function () {
fadeMiddle = $(this).offset().top + (0.4 * $(this).height());
windowBottom = $(window).scrollTop() + $(window).height();
if (fadeMiddle < windowBottom) {
$(this).addClass("FadeIn");
}
}
);
}
);
/* On Load: Trigger Scroll Once*/
$(window).scroll();
</script>
</body>
</html>

If I'm understanding your question correctly, just wrap the logo and text elements in a div, and position it where you want.
<div class="logoContainer">
<h1 class="logo fade_effect">Logo Here</h1>
<p class="text fade_effect">Welcome to My Site</p>
<div>
CSS:
.logoContainer {
color: white;
padding: 0 20px;
border: 3px solid white;
position: absolute;
left: 50%;
top: 50%;
}
.logo {
font-size: 60px;
text-align: center;
}
.text {
font-size: 25px;
}
JSbin if you need it: http://jsbin.com/xerezohabo/edit?output

Need help adding more photo to my parallax site

Before I start I will like to say thank you to Keith Clark for parallax code.
So am trying to create a parallax site with about 50 photo but every time I added more than six images, the images doesn't show only four show. I even tried put up online links of photo, but it still does not seem to work, I have tried adding different types of photo but it still does not work. Any ideas how to fix this?
<!DOCTYPE html>
<html>
<head>
<script src="myScript.js"></script>
<title> Loose Fit </title>
<style>
#import url(http://www.1001fonts.com/code-predators-font.html);
html {
height: 100%;
overflow: hidden;
}
.logo {
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/8e/d5/8d/8ed58d031c960b6fa4e14ae965d6aed0.jpg");
position: absolute;
top: 0;
left: 0;
}
body {
margin:0;
padding:0;
perspective: 1px;
-webkit-perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%
}
h3 {
font-size: 200%
}
h3 {
font-size: 150%
}
h4{
font-size: 100%
}
h5{
font-size: 50%
}
p {
font-size: 140%;
font-color:6699FF
line-height: 150%;
color:6699FF;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
-webkit-transform-style: inherit;
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
-webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
-webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("11.jpg");
background-attachment: fixed;
}
#slide1: {
background-image: url("https://download.unsplash.com/photo-1428930377079-45a584b6dd6b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide2: {
background-image: url("https://download.unsplash.com/photo-1422207134147-65fb81f59e38");
background-attachment: fixed;
}
#slide3: {
background-image: url("https://download.unsplash.com/photo-1428976343495-f2c66e701b2b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide4: {
background-image: url("https://download.unsplash.com/photo-1428677361686-f9d23be145c9");
background-attachment: fixed;
}
#slide5: {
background-image: url("https://download.unsplash.com/photo-1425141750113-187b6a13e28c");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide6: {
background-image: url("https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f");
background-attachment: fixed;
}
#slide7: {
background-image: url("https://download.unsplash.com/photo-1423439793616-f2aa4356b37e");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide8: {
background-image: url("https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f");
background-attachment: fixed;
}
#slide9: {
background-image: url("https://download.unsplash.com/uploads/1411724908903377d4696/2e9b0cb2");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
</style>
</head>
<body>
<div id="title" class="slide header">
<h1>Loose Fit Studio</h1>
<h4>Loose Fit is a hand-picked directory of the best high quality stock photography, deveryed to you.</h4>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>pic 1</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p></p>
</div>
<img src="https://download.unsplash.com/photo-1422433555807-2559a27433bd">
<img src="https://download.unsplash.com/photo-1418479631014-8cbf89db3431">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p></p>
</div>
</div>
<div id="slide4" class="slide header">
<div class="title">
</div>
</body>

I think this is just a case of poor coding (sounds like you've been staring at it for too long... happens to all of us)
In the HTML you posted you dont have a closing tag for the #slide4.
<div id="slide4" class="slide">
<div class="title">
<h1>Slide 4</h1>
<p></p>
</div>
</div>
Also in your CSS just for your Slide IDs 1-8 you have an extra colon : in the code.
#slide8: { <--remove colon
...
}
Should look like this
#slide8 {
...
}
Lastly the transform tag seemed to prevent the parallex from working correctly so i removed it.
#slide1 {
background-image: url("https://download.unsplash.com/photo-1428930377079-45a584b6dd6b");
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
z-index:-1;
}
Once that was cleaned up your code seemed to work well. You can see your code in action here.

We Keep Coding

JavaScript is the programming language of the Web.

How to resize div based on screen resolution - javascript

Assuming your HTML is something like this: <div id="test-div"></div> You could do this: $(window).resize(function() { $('#test-div').css('width', $(window).width()); $('#test-div').css('height', $(window).height()); }); But it's very hard to tell without you posting your actual HTML/Javascript code.

You could also try adding style="overflow:auto" after the divider tag.

Related

Navigation bar hover effect - CSS

How do start CSS animation on click?

How can I create a single page vertical page turn effect

Javascript altering the absolute position of an html element

Need help adding more photo to my parallax site

Categories

Resources