I have a problem that my cards rotate, but each card moves to ~5px (X-axis). How can I rotate them without this movement? (Just like rotate it around itself). I've read many specs and watched many videos. Nothing could help me.
Besides, whenever I click on some cards to return them in a previous state, some of them do it for a second or even a third time.
const cards = document.querySelectorAll(".memory-card")
function flip() {
this.classList.toggle("flip")
}
cards.forEach((c) => c.addEventListener("click", flip))
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
background: linear-gradient(50deg, rgb(198, 193, 188), rgb(153, 145, 137), rgb(109, 101, 94));
background-size: 100%;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
position: fixed;
}
.wrapper {
display: grid;
grid-template: 15vmin/ 20vmin 20vmin 20vmin 20vmin;
justify-content: center;
align-items: center;
padding-top: 8vmin;
margin-left: -2vmin;
perspective: 1000px;
grid-gap: 8vmin 4vmin;
}
/*flip moment*/
.memory-card {
width: calc(25%-10px);
height: calc(14vmin - 2px);
position: relative;
transform: scale(1);
transform-style: preserve-3d;
margin: 2vw;
transition: .5s;
border-radius: 23%;
box-shadow: 1vmin 1vmin 1vmin 2px silver;
transition: transform .5s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.memory-card:active {
transform: scale(0.94);
transition: .05s;
}
.front {
position: absolute;
width: 19vmin;
height: 19vmin;
border-radius: 15px;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.end {
position: absolute;
width: 19vmin;
height: 19vmin;
border-radius: 15px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=U TF-8>
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="index.css">
<title> Memory Game </title>
</head>
<body>
<section class="wrapper">
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1484589065579-248aad0d8b13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=918&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1516339901601-2e1b62dc0c45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=671&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
</section>
<script src="index.js"></script>
</body>
</html>
Add transform-origin when your cards flip. This property allows you to change the position of transformed elements. Learn more at w3schools:
.memory-card.flip {
transform: rotateY(180deg);
transform-origin: 85% 50%;
}
Related
I have this code in my index.html file stackblitz example
<html style="height: 100%;" lang="en" class="perfect-scrollbar-off nav-open">
<head>
<style type="text/css">
.loaderDiv {
background: #117CF7;
width: 100%;
height: 100%;
display: flex;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 200px;
height: 200px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
margin: auto;
}
#supersmartLogo {
width: 150px;
height: 150px;
position: absolute;
left: 45%;
top: 38%;
}
.wrapper {
background: url('./random.svg') center no-repeat;
background-size:50%;
margin: auto;
width: 240px;
height: 240px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body style="height: 100%;" class="g-sidenav-show g-sidenav-pinned">
<div id="root" style="height: 100%;">
<div class="loaderDiv">
<div class="wrapper">
<div class="loader"></div>
</div>
</div>
</div>
</body>
</html>
it's working fine but I have some problems:
the random.svg shows only for the first reload and when I move between pages the random.svg does not show.
how can I add a shadow under the spinner like this.
can anyone tell me how to fix it please or a better way to achieve this behavior?
I am currently working on an interactive simulation with an image as a background. Like this:
<body>
<div>
<img><img>
<button><button>
<!-- etc.. -->
<div>
<body>
Is it possible to make the buttons stick to the image when resizing the window. I've already tried things like setting the positions with a percentage instead of pixels etc. But nothing seems to work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
</body>
</html>
I'm making a music player but when i click the play button the image doesn't spin around and the "music-info" div does't show up either tho no mistakes are announced in the console? i don't know what is wrong? Can anybody help me? Thank you so much! For some reasons, i will leave my html and css in the comment! sorry for this!
This is my js:
const musicContainer = document.querySelector('.music-container');
const playBtn = document.querySelector('#play');
const prevBtn = document.querySelector('#prev');
const nextBtn = document.querySelector('#next');
const audio = document.querySelector('#audio');
const progressContainer = document.querySelector('.progress-container');
const progress = document.querySelector('.progress');
const title = document.querySelector('#title');
const cover = document.querySelector('#cover');
//song titles
const songs = ['love you and love me', 'high kick ost', 'my girl ost'];
//keep tracks of songs
let songIndex = 2;
//initially load songs into DOM
loadSong(songs[songIndex]);
//update songs details
function loadSong(song){
title.innerText = song;
audio.src = `${song}.mp3`;
cover.src = `${song}.jpg`;
}
function playSong(){
musicContainer.classList.add('play');
}
//Event Listener
playBtn.addEventListener('click', ()=>{
const isPlaying = musicContainer.classList.contains('play');
if(isPlaying){
pauseSong();
}else{
playSong();
};
});
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Music Player</title>
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Music Player</h1>
<div class="music-container ">
<div class="music-info">
<h4 id="title">Ukelele</h4>
<div class="progress-container">
<div class="progress" alt="music-cover" id="cover"></div>
</div>
</div>
<audio src="loveyou.mp3" id="audio"></audio>
<div class="img-container">
<img src="ukelele.jpg">
</div>
<div class="navigation">
<button id="prev" class="action-btn">
<i class="fas fa-backward"></i>
</button>
<button id="play" class="action-btn-big">
<i class="fas fa-play"></i>
</button>
<button id="next" class="action-btn">
<i class="fas fa-forward"></i>
</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
This is my css:
*{
box-sizing: border-box;
}
body{
height:100vh;
margin: 0;
background-image: linear-gradient(0deg, rgb(247, 247, 247 ) 23.8%,
rgb(252, 221, 221) 92%
);
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.music-container{
background-color:white;
border-radius: 15px;
box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
display: flex;
padding: 20px 30px;
position: relative;
margin:100px 0;
}
.img-container::after {
content: '';/*compulsory for before and after*/
background-color: #fff;
height: 20px;
width: 20px;
position: absolute;
bottom: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.img-container {
position: relative;
width: 110px;
}
.img-container img{
width: inherit;/*lets the element's width be the same as its parent's*/
height:110px;
border-radius:50%;
object-fit: cover;
position: absolute;
bottom:0;
left:0;
animation:rotate 3s linear infinite;
animation-play-state: paused;
}
.music-container.play .img-container img{
animation-play-state: running;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navigation{
display: flex;/*set items side by side*/
align-items: center;
justify-content: center;
}
.action-btn{
background-color: #fff;
border: none;
font-size: 20px;
padding: 10px;
margin: 0 20px;
cursor: pointer;
}
.action-btn-big{
color: #cdc2d0;
font-size: 30px;
}
.action-btn-big{
border: none;
}
.music-info {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px 15px 0 0;
padding: 10px 10px 10px 150px;
position: absolute;
top:0;
left:20px;
width: calc(100% - 40px);
opacity: 0;
transform: translateY(0%);
transition: transform 0.3s ease-in, opacity 0.3s ease in;/*in line with the up and down transform property*/
}
.music-info h4{
margin: 0;
}
.music-container.play .music-info{
opacity:1;
transform: translateY(-100%);
}
.progress-container{
background: #fff;
border-radius: 5px;
cursor: pointer;
margin: 10px 0;
height: 4px;
width: 100%;
}
.progress{
background: #fa8daa;
border-radius: 5px;
height: 100%;
width: 0%;
transition: width 0.1s linear;
}
there are a lot of errors in your code, Below is the correct code for music player.
Try this after adding your local songs in the songs = []
//song titles
const songs = ["over.wav", "rain.mp3", "robot.wav"];
var song;
let currSong = 2;
const nextSong = () => {
song.pause()
currSong = (currSong + 1) % songs.length;
playSong(currSong);
};
const prevSong = () => {
song.pause()
if(currSong - 1 < 0){
currSong = songs.length - 1
}
else{
currSong = (currSong-1);
}
playSong(currSong);
};
//Event Listener
const playSong = (currPlayingSong = songs[2]) => {
song = new Audio(songs[currSong]);
song.play();
};
*{
box-sizing: border-box;
}
body{
height:100vh;
margin: 0;
background-image: linear-gradient(0deg, rgb(247, 247, 247 ) 23.8%,
rgb(252, 221, 221) 92%
);
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.music-container{
background-color:white;
border-radius: 15px;
box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
display: flex;
padding: 20px 30px;
position: relative;
margin:100px 0;
}
.img-container::after {
content: '';/*compulsory for before and after*/
background-color: #fff;
height: 20px;
width: 20px;
position: absolute;
bottom: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.img-container {
position: relative;
width: 110px;
}
.img-container img{
width: inherit;/*lets the element's width be the same as its parent's*/
height:110px;
border-radius:50%;
object-fit: cover;
position: absolute;
bottom:0;
left:0;
animation:rotate 3s linear infinite;
animation-play-state: paused;
}
.music-container.play .img-container img{
animation-play-state: running;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navigation{
display: flex;/*set items side by side*/
align-items: center;
justify-content: center;
}
.action-btn{
background-color: #fff;
border: none;
font-size: 20px;
padding: 10px;
margin: 0 20px;
cursor: pointer;
}
.action-btn-big{
color: #cdc2d0;
font-size: 30px;
}
.action-btn-big{
border: none;
}
.music-info {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px 15px 0 0;
padding: 10px 10px 10px 150px;
position: absolute;
top:0;
left:20px;
width: calc(100% - 40px);
opacity: 0;
transform: translateY(0%);
transition: transform 0.3s ease-in, opacity 0.3s ease in;/*in line with the up and down transform property*/
}
.music-info h4{
margin: 0;
}
.music-container.play .music-info{
opacity:1;
transform: translateY(-100%);
}
.progress-container{
background: #fff;
border-radius: 5px;
cursor: pointer;
margin: 10px 0;
height: 4px;
width: 100%;
}
.progress{
background: #fa8daa;
border-radius: 5px;
height: 100%;
width: 0%;
transition: width 0.1s linear;
}
.fas {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Music Player</title>
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Music Player</h1>
<div class="music-container ">
<!-- <div class="music-info">
<h4 id="title">Ukelele</h4>
<div class="progress-container">
<div class="progress" alt="music-cover" id="cover"></div>
</div>
</div> -->
<!-- <audio src="loveyou.mp3" id="audio"></audio> -->
<!-- <div class="img-container">
<img src="ukelele.jpg">
</div> -->
<div class="navigation">
<button id="prev" class="action-btn">
<i class="fas fa-backward" onclick="prevSong()"></i>
</button>
<div id="play" class="action-btn-big">
<i class="fas fa-play" onclick="playSong()"></i>
</div>
<button id="next" class="action-btn">
<i class="fas fa-forward" onclick="nextSong()"></i>
</button>
</div>
</div>
<script src="style.js"></script>
</body>
</html>
I have 2 images, which upon hover over I'd like to blur and show text on top. However, currently it appears that the images only blur when the cursor is at its edge but not when the cursor is in the middle. I'd like the image to blur AND show its text. Does anyone have advice on where I might be going wrong?
Also, any advice on how to better position the text within the images would be great. I think my "position" or "display" is off. Thank you!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
.study-icons {
width: 300px;
padding-left: 25px;
padding-right: 25px;
cursor: pointer;
/* border: 2px solid blue; */
}
.study-icons:hover {
-webkit-filter: blur(10px);
filter: blur(10px);
}
.study-wrapper {
display: inline-block;
text-align: center;
padding-bottom: 0px;
}
.img__wrap {
position: relative;
height: 255px;
width: 300px;
}
.img__description_layer {
position: absolute;
top: 0;
bottom: 0;
left: 10;
right: 0;
/* background: rgba(36, 62, 206, 0.6); */
color: black;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.img__description {
transition: .2s;
transform: translateY(1em);
}
.img__wrap:hover .img__description {
transform: translateY(0);
}
</style>
<body>
<div class="img__wrap">
<div id="image1">
<img class="img__img study-icons" src="assets/studies/image1.png">
<div class="img__description_layer">
<p class="img__description">Sample text here about image1?</p>
</div>
</div>
</div>
<div class="img__wrap">
<div id="image2">
<img class="img__img study-icons" src="assets/studies/image2.png">
<div class="img__description_layer">
<p class="img__description">Sample text here about image2</p>
</div>
</div>
</div>
</body>
</html>
to fix this please assign the hovering to be on the img__wrap
In order to make sure your text centered you have to make the .ing__wrap positioned as relative, then set the .img__description_layer to be like this:
Position:absolute;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);
This is my first post - anyways - I was referencing this original ask Welcome screen before website loads (Click to enter) [Splash Screen]
After following the instructions of the second answer where I created two seperate divs I need help figuring out how to use javascript to change the visibility of the splash div when/after the user clicks through the splash.
I have a pretty basic understanding of code and not much else but I'm decent at picking up concepts. Here's what I've got so far:
<!Splash html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
padding: 0
}
div#splash {
max-width: 100%;
height: 100%;
background-image: url("brightsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
}
div#post-splash {
display: none;}
</style>
<div id="splash">
</div>
<div id="post-splash"></div>
<h1>Taylor Forrest</h1>
<h2>photography</h2>
<h2>About</h2>
<h2>Portfolio</h2>
<h2>Contact</h2>
</html>
Pure CSS (no javascript) alternative with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
opacity: 0;
background-color: rosybrown;
background: url('http://i.imgur.com/P9L9jzT.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
#click:checked ~ label > #target {
opacity: 1;
z-index: 200;
cursor: pointer;
pointer-events: auto;
}
#replay {
color: crimson;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 20px;
cursor: pointer;
}
#warning {
color: white;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}
<input type="checkbox" id="click" checked/>
<label for="click">
<div id=target><h1 id=warning>WELCOME</h1></div>
<span id=replay><small>-replay-</small></span>
</label>
<p>page content</p>
You're code is messy - you're missing tags, missplaced some content etc. I suggest you learn more abouth html and css and use proper IDE with syntax higlighting. Anyway here's the code that will do what you expect. This is still far from perfect.
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
margin: 0;
padding: 0
}
#splash {
max-width: 100%;
height: 100%;
background-image: url("brightsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
#post-splash {
display: none;
}
</style>
</head>
<body>
<div id="splash">
</div>
<div id="post-splash">
<h1>Taylor Forrest</h1>
<h2>photography</h2>
<h2>About</h2>
<h2>Portfolio</h2>
<h2>Contact</h2>
</div>
<script>
(function() {
var splash = document.getElementById('splash'),
postSplash = document.getElementById('post-splash');
splash.addEventListener('click', function() {
splash.style.display = "none";
postSplash.style.display = "block";
});
})();
</script>
</body>
</html>