Animate divs on load and then rotate inside a parent div

Animate divs on load and then rotate inside a parent div - javascript

I have making a simple skills block on my website. I have skillsWheel class on parent div and then I have an inner div with h2 with a class of Skills. skillsWheel also includes 8 more divs with a class of skill. I have skills div and all the skill div centred inside the skillsWheel with only skills div showing and skill divs hide behind the skills div. I want the skill divs to show with animation on page load to make a circle around the skills div and then start rotating clock or anti clock wise or both. Any idea what I have to do to accomplish this? So far I have done this much.
.skillsWheel {
width: 500px;
height: 500px;
background: #d7d7d7;
box-sizing: border-box;
padding: 15px;
position: relative;
}
div {
color: #fff;
border-radius: 50%;
}
.skill{
height: 70px;
width: 70px;
background: crimson;
line-height: 70px;
text-align: center;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -35px;
z-index: -5;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.skill:nth-child(2) {
top: 15%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(3) {
top: 25%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(4) {
top: 70%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(5) {
top: 85%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(6) {
top: 70%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(7) {
top: 45%;
left: 85%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(8) {
top: 25%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(9) {
top: 45%;
left: 15%;
margin-left: -40px;
z-index: 1;
}
.skills-main {
width: 100px;
height: 100px;
background: #98bf21;
text-align: center;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.skills-main h5 {
font-size: 22px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="skillsWheel">
<div class="skills-main">
<h5> Skills </h5>
</div>
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">jQuery</div>
<div class="skill">Sass</div>
<div class="skill">BootStrap</div>
<div class="skill">Git</div>
<div class="skill">Photoshop</div>
</div>
</body>
</html>

Simply add a keyframe (ensure you use prefixes for cross compatibility)
#keyframes rotate{
from {
transform:rotate(0deg)
}
to{
transform:rotate(360deg)
}
}
create a div with class skill_container and add all skill container inside.
and add an animation rules to your container with skill class (prefix is also required)
animation-name:rotate;
animation-duration:1s;
animation-iteration-count:infinite;
animation-fill-mode:forwards;
Snippet below
$(document).ready(function() {
$(".skill").css({
width: "70px",
height: "70px"
})
})
.skillsWheel {
width: 500px;
height: 500px;
background: #d7d7d7;
box-sizing: border-box;
padding: 15px;
position: relative;
}
div {
color: #fff;
border-radius: 50%;
}
.skill {
height: 70px;
width: 70px;
background: crimson;
line-height: 70px;
text-align: center;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -35px;
z-index: -5;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.skill:nth-child(2) {
top: 15%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(3) {
top: 25%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(4) {
top: 70%;
left: 25%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(5) {
top: 85%;
left: 50%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(6) {
top: 70%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill_container {
position: absolute;
width: 100%;
height: 100%;
animation-name: rotate;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
.skill:nth-child(7) {
top: 45%;
left: 85%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(8) {
top: 25%;
left: 75%;
margin-left: -40px;
z-index: 1;
}
.skill:nth-child(9) {
top: 45%;
left: 15%;
margin-left: -40px;
z-index: 1;
}
.skills-main {
width: 100px;
height: 100px;
background: #98bf21;
text-align: center;
border-radius: 50%;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.skills-main h5 {
font-size: 22px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="skillsWheel">
<div class="skills-main">
<h5> Skills </h5>
</div>
<div class="skill_container">
<div></div>
<div class="skill">HTML</div>
<div class="skill">CSS</div>
<div class="skill">JavaScript</div>
<div class="skill">jQuery</div>
<div class="skill">Sass</div>
<div class="skill">BootStrap</div>
<div class="skill">Git</div>
<div class="skill">Photoshop</div>
</div>
</div>
</div>
</body>
</html>

Related

completely fit the toggle bar inside the div

my english is not very good, i hope i can explain what i want to say
I want to fit my toggle icon inside div. I couldn't do it, can you show me how to do it?
I want it to be shaped according to the size of the div. when the div shrinks, the toggle menu should also shrink
I want to make the image in the top image like the bottom image
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.btn5 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 50px;
background-color: white;
}
.btn5 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: -20px;
}
.btn5 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: 20px;
}
.btn5.open .icon {
transition: 0.5s;
}
.btn5.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn5.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn5:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon"></div>
</div>
</div>
Thank you in advance for your help :)

This snippet will get you closer to your second image. I changed up the structure a bit and just used a couple spans and positioned them absolute. You can tinker with the animation to your hearts content.
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
display:flex;
align-items: center;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.icon {
width:150px;
height:150px;
position: relative;
}
.btn5 .bar {
transition-duration: 0.5s;
position: relative;
height: 8px;
width: 100%;
height: 20px;
display: block;
background-color: white;
}
.bar:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
}
.bar:nth-of-type(2) {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.bar:nth-of-type(3) {
position: absolute;
bottom: 0;
left: 0;
}
.menu.open .bar:nth-of-type(1) {
transform: rotate(-45deg);
top: 10px;
left: -16px;
}
.menu.open .bar:nth-of-type(3) {
transform: rotate(45deg);
bottom: 10px;
left: -16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>

how to make clock hands move/rotate (html, css)

i tried making an easy working clock but i have no idea how to get the clock hands to rotate. i tried to use "#keyframes" to try to get it working but i dont know what to put in "before". is there a way to make it rotate using only css or will using javascript be easier. the link below shows my work but you can also look below and see my code.
https://codepen.io/dior44/pen/GRZMZdy
h1 {
margin: -40px 0 0 0;
font-size: 50px;
position: relative;
top: 100px;
}
div {
margin: 0 auto;
}
.clock {
height: 400px;
width: 400px;
border-radius: 400px;
background: #cccc;
}
.dot {
height: 60px;
width: 60px;
border-radius: 60px;
background: #aaa;
position: relative;
top: 120px;
left: -27px;
z-index: -1;
}
.hours {
width: 7px;
height: 90px;
background: blue;
position: relative;
top: 100px;
}
.minutes {
width: 5px;
height: 170px;
background: black;
position: relative;
top: -50px;
}
.seconds {
width: 3px;
height: 220px;
background: red;
position: relative;
top: -10px;
animation-name: second;
animation-duration: 1s;
}
#keyframes second {
from {
}
}
h2 {
position: relative;
top: 45px;
left: 738px;
font-size: 35px;
margin: -20px 0 0 0;
}
h3 {
margin: -140px 0 0 0;
font-size: 35px;
position:relative;
top: 310px;
left: 920px;
}
h4 {
margin: 3px 0 0 0;
position: relative;
top: 268px;
left: 570px;
font-size: 35px;
}
h5 {
margin: 20px 0 0 0;
position: relative;
top: 400px;
left: 738px;
font-size: 35px;
}
<h1>Clock</h1>
<h2>12</h2>
<h3>3</h3>
<h4>9</h4>
<h5>6</h5>
<body>
<div class="clock">
<div class="hours">
<div class="minutes">
<div class="seconds">
<div class="dot">
<div class="12">
<div class="3">
<div class="6">
<div class="9">
</body>

Pure HTML/CSS second hand:
#clock_container {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid black;
}
#seconds {
height: 50%;
width: 0px;
box-sizing: border-box;
border: 1px solid black;
top: 0%;
left: 50%;
position: absolute;
transform-origin: bottom;
/* of-course, would be 60s */
animation: secondsMotion 10s infinite linear;
}
#keyframes secondsMotion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="clock_container">
<div id="seconds"></div>
</div>
If you wanted to start with the correct time - with a little JS early on:
var sec = new Date().getSeconds();
var sec_start = (sec/60) * 360 + 'deg';
var sec_end = (sec/60) * 360 + 360 + 'deg';
document.documentElement.style.setProperty("--sec-rot-start", sec_start);
document.documentElement.style.setProperty("--sec-rot-end", sec_end);
and then, in the keyframes:
#keyframes secondsMotion {
0% {
transform: rotate(var(--sec-rot-start));
}
100% {
transform: rotate(var(--sec-rot-end));
}
}

Animated hamburger navigation

I'm creating a full page navigation shade for my site so that it's the same across all devices. At the moment I have two buttons, one for when the shade is in view and one for when it isn't. I'm wondering if it would be better to have one button always present so it can be animated? I'd be aiming for something like the squeeze animation here but I'm not sure how I'd go about animating that across the two buttons vs just one - or how you'd create it from scratch.
Here's what I'm working with;
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
z-index: 2;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align:center;
}
.nav-action {
height: 50px;
width: 50px;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<button class="nav-action">
<p>☰</p>
</button>
</div>
</div>
<div class="site-nav">
<div class="site-nav-action-container">
<button class="nav-action">
<p>×</p>
</button>
</div>
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
At the moment the shade now functions to be visible or not based on button pressed but I wonder if having one button is the way to go or if placing the icon outside of a button would work best.
Ideally the hamburger would animate as the shade is revealed from the top but I'll work on that once a sensible approach to the button is sorted. Any help would be appreciated because I clearly don't know what I'm doing here.
Thanks in advance.

You can use for the ☰ to × effect. You can write all the line labels yourself. the first code snippet is an animation that I use a lot, and the second is the animation that I think you want. I installed both so you can use whatever you want to use.
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
const menuIcon = document.querySelector(".menu-icon");
menuIcon.addEventListener("click", () => {
menuIcon.classList.toggle("toggle")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* Menu icon */
.menu-icon {
cursor: pointer;
position: absolute;
z-index: 1;
}
.menu-icon div {
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
transition: all .4s ease;
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div class="menu-icon">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
</body>
</html>
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
let icon = document.getElementById("nav-icon");
icon.addEventListener("click", () => {
icon.classList.toggle("open")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* NAV ICON */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
top: 8px;
}
#nav-icon span:nth-child(4) {
top: 16px;
}
#nav-icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon {
width: 30px;
height: 25px;
position: absolute;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
z-index: 1;
top: 30px;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>

How to put elements on the border of another element?

I am working on a project trying to make a (let's call it a lake) that is centered inside another (ground) and it has smaller elements around the edge those would be the docks. Docks need to be clickable by the user so it needs to be an element, not just a background image.
This is how i imagined(sorry for the bad paint):
How can I achieve this result with css and HTML or even with javascript/jquery?
.ground {
width: 100%;
height: 600px;
border: 2px solid black;
position: relative;
}
.lake {
width: 60%;
height: 60%;
border: 2px solid black;
border-radius: 200px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dock {
width: 30px;
height: 50px;
margin: 10px;
background: black;
float: right;
}
<div class="ground">
<div class="lake">
<div class="dock"></div>
<div class="dock"></div>
<div class="dock"></div>
<div class="dock"></div>
</div>
</div>

You can do like this using <ul> <li> adjust the positions how much you want I have done sample code.
.ground {
width: 100%;
height: 600px;
border: 2px solid black;
position: relative;
}
.lake {
width: 20%;
height: 60%;
border: 2px solid black;
border-radius: 200px;
background: blue;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li {
list-style-type: none;
}
li.dock {
position: absolute;
width: 30px;
height: 50px;
margin: 10px;
background: black;
float: right;
}
li:nth-child(1) {
top: -2%;
left: 30%;
}
li:nth-child(2) {
left: -2%;
top: 40%;
}
li:nth-child(3) {
right: -2%;
top: 40%;
}
li:nth-child(4) {
left: 50%;
bottom: -2%;
}
li:nth-child(5) {
bottom: -2%;
left: 30%;
}
li:nth-child(6) {
bottom: 10%;
}
li:nth-child(7) {
top: -2%;
left: 50%;
}
<div class="ground">
<ul class="lake">
<li class="dock"></li>
<li class="dock"></li>
<li class="dock"></li>
<li class="dock"></li>
<li class="dock"></li>
<li class="dock"></li>
<li class="dock"></li>
</ul>
</div>

you can use ':nth-child()' or ':nth-of-type()' in css to target the docks and position them individually. Here's an example: https://codepen.io/anon/pen/rqPere
.dock:nth-of-type(1) {
left:auto;
right:0;
transform: translate(50%, -50%);
}
.dock:nth-of-type(2) {
left:50%;
top:0;
}
.dock:nth-of-type(3) {
left:50%;
top:100%;
}

Adjust the position of the docks as needed:
.ground {
width: 100%;
height: 90vh;
min-height: 260px;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.lake {
width: 80%;
min-width:360px;
height: 50%;
min-height: 200px;
border: 8px solid green;
border-radius: 50%;
background: blue;
position: relative;
}
.dock {
width: 30px;
height: 50px;
border: solid green 4px;
background: black;
position: absolute;
}
.dock.first {
top: 20px;
left: 20px;
}
.dock.second {
top: 20px;
right: 20px;
}
.dock.third {
bottom: 40px;
left: 0px;
}
.dock.fourth {
bottom: 40px;
right: 0px;
}
<div class="ground">
<div class="lake">
<div class="dock first"></div>
<div class="dock second"></div>
<div class="dock third"></div>
<div class="dock fourth"></div>
</div>
</div>

Poker table card effect

I did one example just to show scenario I'm right now, I want the cards array on stagger to be showed on close on each player and not in middle as it is in example I did right now. Can anyone give me an idea of how can I achieve this effect? If you could fork the codepen demo that would be great.
// just for example
var cards = ['Cards', 'Cards', 'Cards', 'Cards'];
cards.map(function(card) {
var cardTemp = '<span class="player-card">' + card + '</span>';
$('.table').append(cardTemp);
});
TweenMax.staggerTo(".player-card", 1, {
rotation: 360,
y: 100
}, 0.5);
.table {
position: relative;
max-width: 700px;
height: 300px;
border: 1px solid black;
margin: auto;
}
.dealer {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
border-radius: 50%;
background-color: green;
}
.players {
position: absolute;
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: orange;
color: #fff;
}
.players:nth-child(1) {
top: 0;
left: 0;
}
.players:nth-child(2) {
top: 0;
right: 0;
}
.players:nth-child(3) {
top: 50%;
right: 0;
transform: translateY(-50%);
}
.players:nth-child(4) {
right: 0;
bottom: 0;
}
.players:nth-child(5) {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.players:nth-child(6) {
left: 0;
bottom: 0;
}
.players:nth-child(7) {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.player-card {
position: absolute;
display: block;
width: 50px;
height: 30px;
background-color: red;
color: #fff;
text-align: center;
line-height: 30px;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="table">
<div class="dealer">Dealer</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
<div class="players">Player</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Animate divs on load and then rotate inside a parent div - javascript

Related

completely fit the toggle bar inside the div

how to make clock hands move/rotate (html, css)

Animated hamburger navigation

How to put elements on the border of another element?

Poker table card effect

Categories

Resources