Poker table card effect

Poker table card effect - javascript

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>

Related

Click on a div to activate other div

How can I make multiple <div> elements with classes or id get active when I press on a <div>element that have class or id.
Like the picture below, I want it to go from a white screen to that type of screen that i made with css classes and ids.
https://i.stack.imgur.com/tPZou.jpg
You can see the phone I made under here. Press on the black area to get the white screen, I want to press the white to get the passcode screen: https://seigmann123.github.io/iphone12/phone.html
function screen() {
var e = document.getElementById("screen");
var c = window.getComputedStyle(e).backgroundColor;
if (c === "rgb(0, 0, 0)") {
document.getElementById("screen").style.background = "#ffffff";
}
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.phone {
position: relative;
background: rgb(32, 32, 32);
border-radius: 30px;
height: 560px;
width: 295px;
margin: 0 auto;
}
.sensores {
position: absolute;
background: rgb(32, 32, 32);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
height: 32;
width: 175;
margin: 0 auto;
right: 0;
left: 0;
}
#screen {
position: absolute;
background: #000;
border-radius: 30px;
height: 540px;
width: 275px;
margin: 0 auto;
right: 0;
left: 0;
top: 10;
}
.off-on-button {
width: 3px;
height: 60px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 125;
border-radius: 20px;
left: 294;
}
.sound-up {
width: 3px;
height: 35px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 115;
border-radius: 20px;
left: -295;
}
.sound-down {
width: 3px;
height: 35px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 160;
border-radius: 20px;
left: -295;
}
<div class="phone">
<div id="screen" onclick="javascript:screen();"></div>
<div class="sensores"></div>
<div class="off-on-button"></div>
<div class="sound-up"></div>
<div class="sound-down"></div>
</div>

Try this. Sample code to mimic what you want to achieve.
<!DOCTYPE html>
<head>
<title>Demo</title>
<style>
#whiteDiv, #blueDiv, #passwd{
height: 300px;
width:300px;
}
#whiteDiv, #passwd{
display: none;
}
</style>
</head>
<body>
<div style="border: 1px solid #000;width:300px;height:300px">
<div style="background-color:#08c" id="blueDiv"onclick="activateWhite();">
click me
</div>
<div style="background-color:#fff" id="whiteDiv" onclick="showPasswd();">
click me
</div>
<div style="background-color: #fff;" id="passwd">
<p>Enter password</p>
<input type="password">
</div>
</div>
<script>
function activateWhite(){
document.getElementById("whiteDiv").style.display = "block";
document.getElementById("blueDiv").style.display = "none";
}
function showPasswd(){
document.getElementById("passwd").style.display = "block";
}
</script>
</body>

Change JS to
function screen() {
var e = document.getElementById("screen");
e.classList.toggle("black-screen")
}
add this to css
#screen{
background:white;
...
...
}
.black-screen{
background:#000 !important;
}

I can try to explain better and show better.
I want to do so I can press on #screen to get #screen-on, so then #screen gets replaced with #screen-on. And when I press on #screen-on I want to get #password-screen as a overlay on #screen-on with #sircle on top
body{
display: flex;
justify-content: center;
align-items: center;
}
.phone{
position: relative;
background: rgb(32, 32, 32);
border-radius: 30px;
height: 560px;
width: 295px;
margin: 0 auto;
}
.sensores{
position: absolute;
background: rgb(32, 32, 32);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
height:32;
width: 175;
margin: 0 auto;
right: 0;
left: 0;
}
#screen{
position: absolute;
background: rgb(0, 0, 0);
border-radius: 30px;
height: 540px;
width: 275px;
margin: 0 auto;
right: 0;
left: 0;
top: 10;
}
#screen-on{
position: absolute;
background: rgb(0, 0, 0);
border-radius: 30px;
height: 540px;
width: 275px;
margin: 0 auto;
right: 0;
left: 0;
top: 10;
}
#sircle{
width: 65px;
font-size: 45px;
line-height: 1.4;
height: 65px;
background: #494545;
position: absolute;
right: 0;
text-align: center;
left: 0;
margin: 0 auto;
bottom: 0px;
top: 50;
border-radius: 50%;
color: #dcdcdc;
}
#password-screen {
position: absolute;
height: 540px;
width: 275px;
background-color: rgb(29, 27, 27);
right: 0;
left: 0;
top: 10;
margin: 0 auto;
opacity: 0.5;
border-radius: 30px;
}
.off-on-button{
width: 3px;
height: 60px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 125;
border-radius: 20px;
left: 294;
}
.sound-up{
width: 3px;
height: 35px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 115;
border-radius: 20px;
left: -295;
}
.sound-down{
width: 3px;
height: 35px;
background: rgb(32, 32, 32);
position: absolute;
right: 0;
margin: 0 auto;
top: 160;
border-radius: 20px;
left: -295;
}

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));
}
}

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>

Divs absolute into responsive img

I have a responsive/height image, I want to put absolute elements into img, one by corner but I don't know how to do it, because image size will be dynamic.
Code:
#contenedorimagen {
width: 100%;
background: #000;
}
#imagen {
position: relative;
width: 100vw;
height: 90vh;
vertical-align: middle;
text-align: center;
}
#i {
max-width: 100%;
height: auto;
max-height: 100%;
}
#imagen #c {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
#imagen #h {
position: absolute;
top: 0;
right: 0;
color: #fff;
}
#imagen #pm {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
}
<div id="contenedorimagen">
<div id="imagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>
</div>
Thanks
Example image
firefox

You need to give max-width to image container
#contenedorimagen {
width: 100%;
background: #000;
}
#imagen {
position: relative;
width: 100vw;
height: 90vh;
max-width: 100%;
vertical-align: middle;
text-align: center;
}
#i {
max-width: 100%;
height: auto;
max-height: 100%;
}
#imagen #c {
position: absolute;
top: 0;
left: 0;
color: #fff;
}
#imagen #h {
position: absolute;
top: 0;
right: 0;
color: #fff;
}
#imagen #pm {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
}
<div id="contenedorimagen">
<div id="imagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>
</div>

Maybe you can adapt this example for your exact needs:
#contenedorimagen {
position: relative;
width: 100%;
height: 100%;
}
#contenedorimagen #i {
width: 100%;
height: auto;
display: block;
}
#contenedorimagen div {
background: #000;
padding: 15px;
color: #fff;
}
#c {
position: absolute;
top: 0;
left: 0;
}
#h {
position: absolute;
top: 0;
right: 0;
}
#pm {
position: absolute;
bottom: 0;
left: 0;
}
<div id="contenedorimagen">
<div id="c">0</div>
<div id="h">0</div>
<div id="pm">0</div>
<img id="i" src="https://i.imgur.com/kLkrgKO.jpg" />
</div>

Animate divs on load and then rotate inside a parent div

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>

Develop Reference

JavaScript is the programming language of the Web.

Poker table card effect - javascript

Related

Click on a div to activate other div

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

How to put elements on the border of another element?

Divs absolute into responsive img

Animate divs on load and then rotate inside a parent div

Categories

Resources