How to dynamically change a CSS seconds value

How to dynamically change a CSS seconds value - javascript

var timerSeconds = 10; // This will be set from a DB value
function StartCountDownTimer() {
var timerStart = new Date();
var css_seconds = `${timerSeconds}s`;
css_root = document.querySelector(':root');
cssVarBefore = '--timer-seconds BEFORE being set by JS: ' + getComputedStyle(css_root).getPropertyValue('--timer-seconds');
css_root.style.setProperty('--timer-seconds', css_seconds);
cssVarAfter = '--timer-seconds AFTER being set by JS: ' + getComputedStyle(css_root).getPropertyValue('--timer-seconds');
document.querySelector('.progress-border').classList.add('progress-border-animation');
timerStart.setSeconds(timerStart.getSeconds() + timerSeconds);
timerStart = timerStart.getTime();
// Update the count down every 1 second
var x = setInterval(function() {
var now = new Date().getTime();
var distance = timerStart - now;
var seconds = Math.round(distance / 1000, 1000);
document.getElementById("seconds-remaining").innerHTML = seconds;
if (seconds < 1) {
clearInterval(x);
document.getElementById("seconds-remaining").innerHTML = "";
document.querySelector('.progress-border').classList.remove('progress-border-animation');
alert("This demonstrates that the CSS variable is actually being changed it just isn't affecting the animation duration\n\n" + cssVarBefore + '\n' + cssVarAfter);
}
}, 1000);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* this is the variable I'm trying to set from JavaScript */
--timer-seconds: 5s;
--box-size: 150px;
--border-width: 8px;
}
body {
margin: 3em;
}
container {
display: flex;
flex-direction: columns;
gap: 1em;
}
.secs {
color: #365a2a;
font-size: 72px;
font-weight: bold;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
.count-down-timer{
position: relative;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
width: var(--box-size);
height: var(--box-size);
border: var(--border-width) solid #c05b20;
border-radius: calc(var(--border-width)*2);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(#599646, #bfe2c3);
cursor: pointer;
}
.progress-border {
position: absolute;
top: calc(var(--border-width)*-1);
left: calc(var(--border-width)*-1);
width: var(--box-size);
height: var(--box-size);
border-radius: calc(var(--border-width)*2);
}
.progress-border-animation {
border: var(--border-width) solid #365a2a;
animation: fill forwards linear;
animation-duration: var(--timer-seconds); /* this line doesn't work */
/* animation-duration: 10s; */ /* this line works */
}
#keyframes fill {
0% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
}
12.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
}
25% {
clip-path: polygon(50% -20.71%, 50% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 100% 0%);
}
37.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0%);
}
50% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% 120.71%, 50% 120.71%, 50% 120.71%, 100% 100%, 100% 0%);
}
62.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 0% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
}
75% {
clip-path: polygon(50% -20.71%, 50% 50%, -20.71% 50%, -20.71% 50%, 0% 100%, 100% 100%, 100% 0%);
}
87.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
100% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% -20.71%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
visibility: hidden;
}
}
<!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>Progress Bar</title>
</head>
<body>
<container>
<div>
<p><b>Click on the box to start the timer</b></p><br>
<div onclick="StartCountDownTimer()" class="count-down-timer">
<p class="secs" id="seconds-remaining"></p>
<div class="progress-border"></div>
</div>
</div>
<div>
<p><b>This is where I need help:</b></p>
<p>The CSS variable used for animation duration of the border is being set to 10 seconds to match the count down timer but the border is still using the original value of 5 seconds for its animation. <b>WHY?</b>
</p>
</div>
</container>
</body>
</html>
Trying to figure out how to dynamically change the seconds value for a CSS animation duration. I statically set the value in the class to 20s. From JavaScript I want to be able to change the 20s to some dynamic value, e.g. 60s. I'm using the value in JS to do other iterations so I need it to be an integer in JS. I think the issue I'm having is using different data types integer vs seconds but I'm not sure.
I've tried a few different approaches but none have worked:
changing CSS integer variable --sec: 20, from JS, then using calc(0s + var(--sec)) for the animation duration.
changing CSS seconds variable --sec: 20s, from JS by concatenating (60 + 's') and using var(--sec) for the animation duration.
modifying the document.getElementsByClassName('class')[0].style.animationDuration value from JS by concatenating (60 + 's')
Any suggestions would be much appreciated...

UPDATE regarding the latest posted code
It seems that the CSS variables are not defined in :root {}, instead are in * {}, therefore the setProperty() did not work.
If you move them to :root {} it should work properly:
:root {
--timer-seconds: 5s;
--box-size: 150px;
--border-width: 8px;
}
Update regarding custom duration input
You can also set ms as value of animation-duration in CSS.
More about animation-duration
Here is an over simplified example, it sets a value in ms to animation-duration by changing a variable --duration on the animated element.
There are many other ways, but this seems to be straight forward.
Hope this will help.
const figure = document.querySelector("figure");
const btns = document.querySelectorAll("button:not(#custom)");
const btnCustom = document.querySelector("button#custom");
const input = document.querySelector("input");
btnCustom.addEventListener("click",()=>{
const {value} = input
if (!value || isNaN(value) || value < 100 || value > 2000) {
input.value = ""
return}
const duration = `${Math.floor(value)}ms`
figure.style.setProperty("--duration", duration)
})
btns.forEach((btn) =>
btn.addEventListener("click", (e) =>
figure.style.setProperty("--duration", e.target.dataset.duration)
)
)
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
align-items: center;
width: 500px;
padding: 6px;
}
.control {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
gap: 3px;
}
button {
flex: 1;
padding: 3px;
}
input {
flex: 1;
padding: 3px;
}
.animation {
display: flex;
align-items: center;
width: 500px;
height: 150px;
background-color: #fdf5e6;
}
figure {
width: 100px;
height: 100px;
background-color: #1e90ff;
border-radius: 50%;
animation: move alternate infinite linear;
animation-duration: var(--duration, 1200ms);
}
#keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(400px);
}
}
<section>
<div class="control">
<input
type="number"
min="100"
max="2000"
step="100"
placeholder="Enter num between 100 and 2000"
/>
<button id="custom">Set custom duration in ms</button>
</div>
<div class="control">
<button data-duration="1200ms">Defalut</button>
<button data-duration="700ms">Fast</button>
<button data-duration="300ms">Faster</button>
</div>
<div class="animation">
<figure></figure>
</div>
</section>

Related

html/css circular progress bar with image inside

I want to create a circular progress bar around an image that should look like this :
I have tried making the circle fill but it just transforms into a spinner with the following code
.wrapper {
width: 152px;
height: 152px;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #21ac62;
width: 120px;
height: 120px;
animation: fill ease-in-out 3s;
transform: rotate(360deg);
}
.wrapper {
background: url('https://i.ibb.co/5T3p5sY/icon-3151974-1280.png') center no-repeat;
background-size:50%;
}
#keyframes fill{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="jQuery-plugin-progressbar.css">
</head>
<body>
<div class="wrapper">
<div class="loader"></div>
</div>
</body>
</html>

I achieved the goal without changing the HTML layout using clip-path animation.
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
.wrapper {
width: 152px;
height: 152px;
background-image: url('https://i.ibb.co/5T3p5sY/icon-3151974-1280.png');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
.loader {
border: 16px solid #21ac62;
border-radius: 50%;
width: 120px;
height: 120px;
animation: fill linear 3s;
}
#keyframes fill {
0% {
clip-path: polygon(50% 0%, 50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
}
12.5% {
clip-path: polygon(50% 0%, 50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
}
37.5% {
clip-path: polygon(50% 0%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0%);
}
62.5% {
clip-path: polygon(50% 0%, 50% 50%, 0% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
}
87.5% {
clip-path: polygon(50% 0%, 50% 50%, 0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
100% {
clip-path: polygon(50% 0%, 50% 50%, 50% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
}
<div class="wrapper">
<div class="loader"></div>
</div>
Edit: This should be smoother:
.wrapper {
width: 152px;
height: 152px;
background-image: url('https://i.ibb.co/5T3p5sY/icon-3151974-1280.png');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
.loader {
border: 16px solid #21ac62;
border-radius: 50%;
width: 120px;
height: 120px;
animation: fill linear 3s;
}
#keyframes fill {
0% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
}
12.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
}
25% {
clip-path: polygon(50% -20.71%, 50% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 100% 0%);
}
37.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0%);
}
50% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% 120.71%, 50% 120.71%, 50% 120.71%, 100% 100%, 100% 0%);
}
62.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 0% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);
}
75% {
clip-path: polygon(50% -20.71%, 50% 50%, -20.71% 50%, -20.71% 50%, 0% 100%, 100% 100%, 100% 0%);
}
87.5% {
clip-path: polygon(50% -20.71%, 50% 50%, 0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
100% {
clip-path: polygon(50% -20.71%, 50% 50%, 50% -20.71%, 0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
}
<div class="wrapper">
<div class="loader"></div>
</div>

For more Information and Full Explaination, Reach to https://dev.to/shantanu_jana/circular-progress-bar-using-html-and-css-1oda
body {
background:#d2eaf1;
}
.circle-wrap {
margin: 150px auto;
width: 150px;
height: 150px;
background: #fefcff;
border-radius: 50%;
border: 1px solid #cdcbd0;
}
.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
width: 150px;
height: 150px;
position: absolute;
border-radius: 50%;
}
.circle-wrap .circle .mask {
clip: rect(0px, 150px, 150px, 75px);
}
.circle-wrap .inside-circle {
width: 122px;
height: 122px;
border-radius: 50%;
background: #d2eaf1;
line-height: 120px;
text-align: center;
margin-top: 14px;
margin-left: 14px;
color: #1e51dc;
position: absolute;
z-index: 100;
font-weight: 700;
font-size: 2em;
display:flex;
align-items:center;
justify-content:center;
}
/* color animation */
/* 3rd progress bar */
.mask .fill {
clip: rect(0px, 75px, 150px, 0px);
background-color: #227ded;
}
.mask.full,
.circle .fill {
animation: fill ease-in-out 3s;
transform: rotate(135deg);
}
#keyframes fill{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(135deg);
}
}
<body>
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
</div>
<div class="inside-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-apple" viewBox="0 0 16 16">
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
<path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282z"/>
</svg> </div>
</div>
</div>
</body>

Adding shine animation not working in special cases

I have this function to shine any text element which is passed to it.
The first example here works fine (the second example doesn't work, I provide this in case this can help us find out the issue):
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const prepareCaption = document.querySelector(".prepareCaption");
Shine(prepareCaption);
}, 2500);
.prepare-container {
position: absolute;
overflow: hidden;
display: flex;
align-items: center;
margin: 0 auto;
left: 2.5%;
height: 20vh;
width: 95%;
z-index: 11;
top: 55vh;
padding-top: 10px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.prepareCaption {
position: relative;
filter: drop-shadow(2px 2px 2px #100021) drop-shadow(1px .05em 1px #0d021a);
text-align: center;
width: 100%;
color: #f8f7fa;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="prepare-container">
<p class="prepareCaption" style="color: rgb(255, 0, 64); font-family: "Open Sans Semibold"; font-size: 28px;">This is shining</p>
</div>
I expect this function work in any satiation but unfortunately we have this second example in which the function acts wired and doesn't work as expected, here it is:
Note: the shine function is identical in both cases. the only difference is the element I pass to the function.
Here we want to shine the expandCaptionSpan id:
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const expandCaption = document.querySelector("#expandCaptionSpan");
Shine(expandCaption);
}, 2500);
.expandCaption {
position: relative;
font-family: "Open Sans Semibold", sans-serif;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 4vw;
color: #ff0000;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}
.arrow {
color: #ff9900;
font-size: 2vw;
}
.arrow-samll {
color: #ff4646;
font-size: 1.5vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="expand-caption-container">
<p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
<span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
</div>
How can I fix the second example? What am I missing?

It seems that your JS is the same but CSS not. I've found that text-shadow is causing the issue. Just replace it with filter as it's done in your first example and it works. It seems that the issue is caused by render system.
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const expandCaption = document.querySelector("#expandCaptionSpan");
Shine(expandCaption);
}, 2500);
.expandCaption {
position: relative;
font-family: "Open Sans Semibold", sans-serif;
/*text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);*/
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 1));
text-align: center;
width: 100%;
font-size: 4vw;
color: #ff0000;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}
.arrow {
color: #ff9900;
font-size: 2vw;
}
.arrow-samll {
color: #ff4646;
font-size: 1.5vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="expand-caption-container">
<p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
<span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
</div>

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

How to resize div based on screen resolution

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.

How to scale a DIV element and its children to fit in parent element with CSS3/JavaScript

Overview
I have a #container element which houses a centered element .center.
This web-app will be fullscreen on a number of monitors of various width and height; some portrait and some landscape.
The .center element is significantly smaller than its parent #container, and on larger screens, it sits in the middle with lots of space between the wrapper and the edges, both horizontally and vertically.
Issue
I am trying to figure out a way to expand the .center so that it scales (all its contents scaling equally, including images and font size) until either:
its width is equal to the width of #container, or
its height is equal to the height of #container
I am aware of the CSS3 transform: scale() functions, however as the height and width of the #container is unknown and variable, I don't know how to scale all elements dynamically.
How can this be achieved?
Code
#container {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: rgb(37, 66, 141);
background: -moz-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
background: radial-gradient(ellipse at center, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25428d', endColorstr='#000000', GradientType=1);
}
#wrapper {
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
height: 100%;
width: 100%;
text-align: center;
z-index: 2;
}
#wrapper .center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
* {
color: white;
font-family: "Lato", Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.62em;
}
#logo {
margin: 40px 0;
}
#pulsor {
-webkit-animation: pulsate 60s linear 0s infinite;
-moz-animation: pulsate 60s linear 0s infinite;
-animation: pulsate 60s linear 0s infinite;
text-shadow: 0 0 8px #ccc;
}
#-webkit-keyframes pulsate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes pulsate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes pulsate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
body,
html {
margin: 0;
padding: 0;
}
<div id="container">
<div id="overlay"></div>
<div id="wrapper">
<div class="center">
<h1>Tonight at</h1>
<div id="logo"><img src="http://design.ubuntu.com/wp-content/uploads/logo-ubuntu_cof-orange-hex.png" id="pulsor" width="280"></div>
<h2>Theatre</h2>
<p>19:30 - Les Miserables</p>
<p>20:30 - A cheeky Indian take-away</p>
<p></p>
<h2>Devant Room</h2>
<p>17:30 - My Favourite Books with JK Rowling</p>
<p>18:00 - Look! I did a sleight of hand! Just kidding with Lennart Green</p>
<p>19:30 - Old people grumbling about the number of steps to the Theatre</p>
</div>
</div>
</div>

If you want to scale everything you can use em or pt to set sizes for everything including image widths and padding. Then you can use vw or vmin on the font size to scale everything according to screen size.
padding:1em;
width:30em;
font-size:2vw;
Here is an example:
https://jsfiddle.net/5ezu2gLu/
Also, you can control the minimum and maximum sizes, on whatever you wish. More info here: http://madebymike.com.au/writing/precise-control-responsive-typography/

Try these changes:
Remove the center DIV from your HTML.
And change the following CSS:
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: rgb(37, 66, 141);
background: -moz-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
background: radial-gradient(ellipse at center, rgba(37, 66, 141, 1) 0%, rgba(0, 0, 0, 1) 54%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25428d', endColorstr='#000000', GradientType=1);
}
#wrapper {
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
#logo img {
max-width: 100%;
}
Here's an updated EXAMPLE
This basically scales the elements as the viewport width is reduced, however, I would advise using #media() queries to be more precise when scaling fonts etc.

We Keep Coding

JavaScript is the programming language of the Web.

How to dynamically change a CSS seconds value - javascript

Related

html/css circular progress bar with image inside

Adding shine animation not working in special cases

Javascript altering the absolute position of an html element

How to resize div based on screen resolution

How to scale a DIV element and its children to fit in parent element with CSS3/JavaScript

Categories

Resources