I'm making a mobile app, and a part of it is being able to throw dice.
I'm working with Ionic as mobile framework and using angular and jquery to make the dice roll. The problem is when i roll multiple dice, that these dice can appear on the same spot, so basicly overlap eachother. I tried working with the jquery offset() and position() and then saying the left value of the dice can never be the same, that way the dice will always appear in another 'column'.
but somehow this didn't work because it registered the position before rolling, and not after rolling.
Here is my code:
dice.html
<ion-view view-title="dice" id="dice">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content id="dice" scroll="true">
<button class="btn orange" id="addDie1" type="button"><span>Add second die</span></button>
<button class="btn red" id="addDie2" type="button"><span>Add third die</span></button>
<section id="roll-wrap">
<div id="die" style="transform: rotateX(0deg) rotateY(0deg);">
<div class="sf f1">1</div>
<div class="sf f2">2</div>
<div class="sf f3">3</div>
<div class="sf f4">4</div>
<div class="sf f5">5</div>
<div class="sf f6">6</div>
</div>
<div id="die2" style="transform: rotateX(0deg) rotateY(90deg);">
<div class="sf f1">1</div>
<div class="sf f2">2</div>
<div class="sf f3">3</div>
<div class="sf f4">4</div>
<div class="sf f5">5</div>
<div class="sf f6">6</div>
</div>
<div id="die3" style="transform: rotateX(0deg) rotateY(180deg);">
<div class="sf f1">1</div>
<div class="sf f2">2</div>
<div class="sf f3">3</div>
<div class="sf f4">4</div>
<div class="sf f5">5</div>
<div class="sf f6">6</div>
</div>
</section>
<button class="btn orange" id="play" type="button"><span>Roll it</span></button>
</ion-content>
</ion-view>
controllers.js
.controller('DiceCtrl', function($scope) {
(function($, self){
if(!$ || !self) {
return;
}
for(var i=0; i<self.properties.length; i++) {
var property = self.properties[i],
camelCased = StyleFix.camelCase(property),
PrefixCamelCased = self.prefixProperty(property, true);
$.cssProps[camelCased] = PrefixCamelCased;
}
})(window.jQuery, window.PrefixFree);
//Actual code for Play Action , still buggy for 2 dice stacking on top of eachother
$(function(){
$("#addDie1").click(function(e){
e.preventDefault();
$("#die2").css("display","block");
});
$("#addDie2").click(function(e){
e.preventDefault();
$("#die3").css("display","block");
});
$()
var x=[0,90,180,270];
$("#play").click(function(e){
var position = $(".sf").offset();
var position2 = $("#die2 .sf").offset();
var position3 = $("#die3 .sf").offset();
console.log(position);
console.log(position2);
console.log(position3);
e.preventDefault();
do {
var rand1=Math.floor(Math.random()*4);
var rand2=Math.floor(Math.random()*4);
var rand3=Math.floor(Math.random()*4);
var rand4=Math.floor(Math.random()*4);
var rand5=Math.floor(Math.random()*4);
var rand6=Math.floor(Math.random()*4);
} while((x[rand1] == x[rand3] && x[rand2] == x[rand4]) || (x[rand1] == x[rand5] && x[rand2] == x[rand6]) || (x[rand3] == x[rand5] && x[rand4] == x[rand6]))
console.log(x[rand1] + "\n" + x[rand2] + "\n" + x[rand3] + "\n" + x[rand4] + "\n" + x[rand5] + "\n" + x[rand6] + "\n")
$("#die").css("transform","rotateX("+x[rand1]+"deg) rotateY("+x[rand2]+"deg)");
$("#die2").css("transform","rotateX("+x[rand3]+"deg) rotateY("+x[rand4]+"deg)");
$("#die3").css("transform","rotateX("+x[rand5]+"deg) rotateY("+x[rand6]+"deg)");
});
});
})
style.css
#dice {
background: url("../img/dice_bg.jpg") no-repeat;
background-position: center;
background-size: cover;
}
#roll-wrap {
perspective: 800;
perspective-origin: 50% 200px;
}
#addDie1, #addDie2{
width: 50%;
}
#addDie2 {
float:right;
}
#play {
width: 50%;
margin-left: 25%;
margin-top: 10px;
}
.btn {
position: relative;
display: inline-block;
margin: 0px auto;
padding: 0;
overflow: hidden;
border-width: 0;
outline: none;
background-color: #2ecc71;
color: #ecf0f1;
transition: background-color .3s;
}
.btn > * {
position: relative;
}
.btn span {
display: block;
padding: 12px 24px;
}
.btn.orange {
background-color: #e67e22;
}
.btn.orange:hover, .btn.orange:focus {
background-color: #d35400;
}
.btn.red {
background-color: #e74c3c;
}
.btn.red:hover, .btn.red:focus {
background-color: #c0392b;
}
#die {
position: relative;
margin: 40px auto 0;
height: 400px;
width: 90%;
transition: transform 1.5s linear;
transform-style: preserve-3d;
}
#die2 {
position: relative;
margin: -400px auto 0;
height: 400px;
width: 90%;
transition: transform 1.5s linear;
transform-style: preserve-3d;
}
#die3 {
position: relative;
margin: -400px auto 0;
height: 400px;
width: 90%;
transition: transform 1.5s linear;
transform-style: preserve-3d;
}
.sf {
position: absolute;
height: 62px;
width: 62px;
padding: 20px;
background-color:white;;
font-size: 30px;
color: black;;
border: 1px solid white;
border-radius: 3px;
text-align: center;
}
/* TranslateZ = hoever elk vlak vaneen moet staan. rotateX waar het moet staan */
#die .f1, #die2 .f1, #die3 .f1 {
transform: rotateX(90deg) translateZ(30px);
}
#die .f2, #die2 .f2, #die3 .f2 {
transform: translateZ(30px);
}
#die .f3, #die2 .f3, #die3 .f1 {
transform: rotateY(90deg) translateZ(30px);
}
#die .f4, #die2 .f4, #die3 .f4 {
transform: rotateY(180deg) translateZ(30px);
}
#die .f5, #die2 .f5, #die3 .f5 {
transform: rotateY(-90deg) translateZ(30px);
}
#die .f6, #die2 .f6, #die3 .f6 {
transform: rotateX(-90deg) rotate(180deg) translateZ(30px);
}
Related
I'm trying to rotate 4 children (.feat) elements within a circle 90 degrees every 3 seconds using a CSS custom property called --angle, but it doesn't seem to work as expected:
function rotation() {
let inner = document.querySelector('[inn]');
let rota = inner.style.transform;
}
setInterval(rotation, 3000);
.feat-cont {
width: 60vmax;
height: 60vmax;
}
.feat-cont p {
display: inline-block;
}
.inner {
--angle: 0;
position: relative;
background-color: yellow;
transform: rotate(var(--angle) * 1deg);
width: 100%;
height: 100%;
border-radius: 50%;
}
.feat {
position: absolute;
}
.feat1 {
left: 25vmax;
}
.feat2 {
left: 50vmax;
top: 25vmax;
}
.feat3 {
left: 25vmax;
top: 50vmax;
}
.feat4 {
top: 25vmax;
}
<div class='feat-cont'>
<div class='inner' inn>
<div class='feat feat1' f1>
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/>
<p>Fast Performance</p>
</div>
<div class='feat feat2' f2>
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/>
<p>64 GBs of memory</p>
</div>
<div class='feat feat3' f3>
<img src="https://img.icons8.com/nolan/64/camera.png"/>
<p>3K MP camera</p>
</div>
<div class='feat feat4' f4>
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/>
<p>Trusted brand</p>
</div>
</div>
</div>
You can change the angle CSS custom property using CSSStyleDeclaration.setProperty():
circle.style.setProperty('--angle', `${ angle }deg`);
Also, note you use it as transform: rotate(var(--angle)), not as rotate(var(--angle) * 1deg), so the unit should already be included in the CSS property.
If you don't want to use CSS properties, you can change the style attribute directly:
circle.style.transform = `rotate(${ angle }deg)`;
However, I guess you need to rotate the circle in one direction while rotating all the children (.feat) in the opposite direction to keep them straight, so using CSS properties is probably more convenient, as otherwise, you would have to change the style attribute in all 4 children:
const circle = document.querySelector('.circle');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const step = 90;
let angle = 0;
let intervalID = null;
function updateRotation() {
circle.style.setProperty('--angle', `${ angle }deg`);
circle.style.setProperty('--angle-inverse', `${ -angle }deg`);
}
function autoRotate() {
intervalID = setInterval(() => {
angle += step;
updateRotation();
}, 3000);
}
prev.onclick = () => {
clearInterval(intervalID);
angle -= step;
updateRotation();
autoRotate();
};
next.onclick = () => {
clearInterval(intervalID);
angle += step;
updateRotation();
autoRotate();
};
autoRotate();
body {
font-family: monospace;
}
.container {
width: 60vmax;
height: 60vmax;
margin: 0 auto;
overflow: hidden;
}
.circle {
--angle: 0;
--angle-inverse: 0;
position: relative;
background-color: yellow;
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform linear 1s;
transform: rotate(var(--angle));
}
.feat {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20vmax;
height: 20vmax;
text-align: center;
transition: transform linear 1s;
}
.feat > img {
width: 10vmax;
height: 10vmax;
}
.feat > p {
margin: 8px 0 0;
}
.feat1 {
top: 0;
left: 50%;
transform: translate(-50%, 0) rotate(var(--angle-inverse));
}
.feat2 {
right: 0;
top: 50%;
transform: translate(0, -50%) rotate(var(--angle-inverse));
}
.feat3 {
bottom: 0;
left: 50%;
transform: translate(-50%, 0) rotate(var(--angle-inverse));
}
.feat4 {
left: 0;
top: 50%;
transform: translate(0, -50%) rotate(var(--angle-inverse));
}
.button {
position: fixed;
top: 0;
bottom: 0;
background: transparent;
border: 0;
padding: 32px;
outline: none;
font-family: monospace;
font-size: 32px;
}
.button:hover {
background: rgba(0, 0, 0, .0625);
}
.prev {
left: 0;
}
.next {
right: 0;
}
<div class="container">
<button class="button prev">‹</button>
<div class="circle">
<div class="feat feat1">
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/>
<p>Fast Performance</p>
</div>
<div class="feat feat2">
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/>
<p>64 GBs of memory</p>
</div>
<div class="feat feat3">
<img src="https://img.icons8.com/nolan/64/camera.png"/>
<p>3K MP camera</p>
</div>
<div class="feat feat4">
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/>
<p>Trusted brand</p>
</div>
</div>
<button class="button next">›</button>
</div>
I have added a pure CSS solution, You might not need javascript manipulations at all, it's lightweight too.
Just use CSS inbuilt Animation property.
.inner{animation: rotate 12s infinite;}
#keyframes rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(90deg);}
50%{transform: rotate(180deg);}
75%{transform: rotate(270deg);}
100%{transform: rotate(360deg);}
}
Find the codepen here
.feat-cont {
width: 60vmax;
height: 60vmax;
}
.feat-cont p {
display: inline-block;
}
.inner {
position: relative;
background-color: yellow;
width: 100%;
height: 100%;
border-radius: 50%;
}
.feat {
position: absolute;
}
.feat1 {
left: 25vmax;
}
.feat2 {
left: 50vmax;
top: 25vmax;
}
.feat3 {
left: 25vmax;
top: 50vmax;
}
.feat4 {
top: 25vmax;
}
.inner {
animation: rotate 12s infinite;
}
#keyframes rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(90deg);}
50%{transform: rotate(180deg);}
75%{transform: rotate(270deg);}
100%{transform: rotate(360deg);}
}
#keyframes r-rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(-90deg);}
50%{transform: rotate(-180deg);}
75%{transform: rotate(-270deg);}
100%{transform: rotate(-360deg);}
}
.feat {
animation: r-rotate 12s infinite;
}
<nav></nav>
<main>
<section>
<div class='feat-cont'>
<div class='inner' inn>
<div class='feat feat1' f1>
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/><br><p>Fast Performance</p>
</div>
<div class='feat feat2' f2>
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/><br><p>64 GBs of memory</p>
</div>
<div class='feat feat3' f3>
<img src="https://img.icons8.com/nolan/64/camera.png"/><br><p>3K MP camera</p>
</div>
<div class='feat feat4' f4>
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/><br><p>Trusted brand</p>
</div>
</div>
</div>
</section>
<section class='ndsection'>
</main>
Update Your javascript Code
setInterval(rotation, 3000);
var deg = 90;
let inner = document.querySelector('.inner');
function rotation() {
inner.style.transform='rotate('+deg+'deg)';
}
I'm just trying to change gently div's size.
When I click that div, I can unfold and fold those h5 elements
but how can I adapt animation about this action?
I already tried to apply keyframe animation or css transition, but I failed
for (var i = 1; i <= 5; i++) {
$('#sampleNumberList').append('<h5>#' + i + '</h5>');
}
$('#topSampleNum').on('click', function() {
if ($('#sampleNumberList').hasClass('active') === true) {
$('#sampleNumberList').removeClass('active');
} else {
$('#sampleNumberList').addClass('active');
}
});
.topFloatBar {
position: fixed;
width: 100%;
top: 0;
z-index: 5;
text-align: center;
background-color: #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#sampleNumberList {
max-height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topFloatBar" id="topSampleNum">
<h2 id="mainNumber"> #1 </h2>
<div id="sampleNumberList"> </div>
</div>
Like this?
var sampleList = document.querySelector('#sampleNumberList');
var listTrigger = document.querySelector('#mainNumber');
for(var i=1; i<=10; i++){
let el = document.createElement('h5');
el.innerText = i;
sampleList.append(el);
}
listTrigger.addEventListener('click', ()=> {sampleList.classList.toggle('active');});
.topFloatBar{
position:fixed;
width:100%;
top: 0;
z-index:5;
text-align:center;
background-color: #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor:pointer;
}
#sampleNumberList {
position: absolute;
width: 100%;
overflow:hidden;
height: auto;
transform: scale(0);
transition: transform 0.5s ease-in-out;
transform-origin: top;
}
.active{transform: scale(1) !important;}
<div class="topFloatBar" id="topSampleNum" >
<h2 id="mainNumber">#1</h2>
<div id="sampleNumberList"></div>
</div>
Use jQuery slideToggle() to smoothly toggle those h5.
See Demo: JSFiddle
$('#clickableDiv').click(function() {
$('h5').slideToggle();
});
#sampleNumberList>h5 {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div style='background:red'>
<h2 id='mainNumber'> #1 </h2>
<div id='clickableDiv' style='background:yellow'> Click Me </div>
<div id='sampleNumberList' style='background:blue'>
<h5> #1 </h5>
<h5> #2 </h5>
<h5> #3 </h5>
</div>
</div>
I have some javascript/CSS that hid/show content and some animation. It all works marvelously with no issues as far as functionality, however, I want to add a feature where the same picture/button that I click to run the script can again be used to run the same script in reverse to go back to the original state. See code below.
/* Portfolio */
.portfolio {
grid-area: portfolio;
width: 100%;
}
.portfolio {
display: grid;
background: #F1F1F1;
grid-template-rows: repeat(1, 100%);
grid-gap: 10px;
grid-template-areas: "portfolio-header";
align-items: start;
text-align: center;
min-height: 1000px;
}
.portfolio-header {
width: 100%;
text-align: center;
margin-top: 64px;
margin-bottom: -300px;
}
.portfolio-container {
min-height: 500px; /* temporary */
padding: 0 20px;
position: relative;
}
.portfolio-container .portfolio-picture {
left: 0;
position: absolute;
transition: all ease-in .3s; /* MAGIC */
top: 0;
width: 25%;
}
.portfolio-container .portfolio-picture img {
max-width: 100%;
}
.portfolio-container .portfolio-picture.portfolio-picture-1 {}
.portfolio-container.portfolio-active-2 .portfolio-picture-1,
.portfolio-container.portfolio-active-3 .portfolio-picture-1,
.portfolio-container.portfolio-active-4 .portfolio-picture-1,
.portfolio-container.portfolio-active-1 .portfolio-picture-2,
.portfolio-container.portfolio-active-3 .portfolio-picture-2,
.portfolio-container.portfolio-active-4 .portfolio-picture-2,
.portfolio-container.portfolio-active-1 .portfolio-picture-3,
.portfolio-container.portfolio-active-2 .portfolio-picture-3,
.portfolio-container.portfolio-active-4 .portfolio-picture-3,
.portfolio-container.portfolio-active-1 .portfolio-picture-4,
.portfolio-container.portfolio-active-2 .portfolio-picture-4,
.portfolio-container.portfolio-active-3 .portfolio-picture-4 {
opacity: 0;
pointer-events: none;
}
.portfolio-container .portfolio-picture.portfolio-picture-2 { transform: translate(100%,0); }
.portfolio-container .portfolio-picture.portfolio-picture-3 { transform: translate(200%,0); }
.portfolio-container .portfolio-picture.portfolio-picture-4 { transform: translate(300%,0); }
.portfolio-container .portfolio-content {
box-sizing: border-box;
opacity: 0;
padding-left: 30px;
position: absolute;
right: 0;
top: 0;
transform: translate(0,100%);
transition: all ease-in .3s; /* MAGIC */
width: 75%;
}
.portfolio-container.portfolio-active-2 .portfolio-picture.portfolio-picture-2,
.portfolio-container.portfolio-active-3 .portfolio-picture.portfolio-picture-3,
.portfolio-container.portfolio-active-4 .portfolio-picture.portfolio-picture-4 {
transform: translate(0,0);
}
.portfolio-container.portfolio-active-1 .portfolio-content.portfolio-content-1,
.portfolio-container.portfolio-active-2 .portfolio-content.portfolio-content-2,
.portfolio-container.portfolio-active-3 .portfolio-content.portfolio-content-3,
.portfolio-container.portfolio-active-4 .portfolio-content.portfolio-content-4 {
opacity: 1;
pointer-events: auto;
transform: translate(0,0);
}
.portfolio-back-button {
display: none;
}
.portfolio-back-button.portfolio-back-button-visible {
display: inline-block;
}
.port-content {
text-align: center;
}
.port-cont {
max-width: 35%;
text-align: justify;
background-image: url("assets/img/pattern.png");
color: #808080;
font-weight: bold;
text-transform: uppercase;
margin-right: 40%;
padding: 10px;
margin-bottom: 50px;
box-sizing: border-box;
}
function clearSelection() {
document.querySelector('.portfolio-container').classList.remove('portfolio-active-1', 'portfolio-active-2', 'portfolio-active-3', 'portfolio-active-4');
document.querySelector('.portfolio-back-button').classList.remove('portfolio-back-button-visible');
}
function selectPortfolio(which) {
clearSelection();
document.querySelector('.portfolio-container').classList.add('portfolio-active-' + which);
document.querySelector('.portfolio-back-button').classList.add('portfolio-back-button-visible');
}
<div class="portfolio-container">
<div class="portfolio-content portfolio-content-1 port-cont">
<p>some text</p>
</div>
<div class="portfolio-content portfolio-content-2 port-cont">
<p>some text</p>
</div>
<div class="portfolio-content portfolio-content-3 port-cont">
<p>some text</p>
</div>
<div class="portfolio-content portfolio-content-4 port-cont">
<p>some text</p>
</div>
<div class="portfolio-picture portfolio-picture-1">
<img src="assets/img/portfolio/corinthmc/corinthmc_small.png" alt="Corinth Designs">
</div>
<div class="portfolio-picture portfolio-picture-2">
<img src="assets/img/portfolio/beardedrazorback/beardedrazorback_small.png" alt="Corinth Designs">
</div>
<div class="portfolio-picture portfolio-picture-3">
<img src="assets/img/portfolio/theord/theord_small.png" alt="Corinth Designs">
</div>
<div class="portfolio-picture portfolio-picture-4">
<img src="assets/img/portfolio/21divine/21divine_small.png" alt="Corinth Designs">
</div>
<div class="port-back portfolio-back-button">
Back <i class="fas fa-angle-double-right"></i>
</div><!-- back button -->
If you modify the selectPortfolio function to the following, you can use a closure and an internal state variable to switch back and forth.
https://codepen.io/anon/pen/gKbjQj?editors=0010
const selectPortfolio = (() => {
let back = false;
return (which) => {
// clearSelection();
if (back) {
// document.querySelector('.portfolio-back-button').classList.add('portfolio-back-button-visible');
console.log(back, 'portfolio-back-button-visible');
} else {
// document.querySelector('.portfolio-container').classList.add('portfolio-active-' + which);
console.log(back, 'portfolio-active-');
}
back = !back;
}
return back;
})();
selectPortfolio();
selectPortfolio();
selectPortfolio();
selectPortfolio();
// true "portfolio-back-button-visible"
// false "portfolio-active-"
// true "portfolio-back-button-visible"
// false "portfolio-active-"
Since Last 2 days I am trying to achieve smooth hotspot focus but i am not able to achieve it.
please click on below link and click on panorama icon,you will get an idea what i am saying.
http://ggnome.com/samples/pano2vr_5/tower/
PS: I have used http://threejs.org/examples/webgl_panorama_equirectangular.html panorama to achieve desired functionality.
Can anyone help me with this please...
You either have to create a 3d object in your scene and make it clickable or add a second threejs renderer, this time it will be a css3drenderer, basically it allows to have html elements in your threejs world. Place the camera in the middle of a cube made by html/css elements:
http://mrdoob.com/lab/javascript/threejs/css3d/
or go completely with css, something like:
$('body').on('click', function(e) {
console.log('clicked on .cube. New transform: ');
var newTransform = "translateZ(800px) rotateX("+Math.round(Math.random() * 360)+"deg) rotateY("+Math.round(Math.random() * 360)+"deg) rotateZ("+0+"deg)";
console.log(newTransform)
$('.cube').css({
"transform": newTransform,
"-webkit-transform": newTransform,
})
});
$('video').on('ended', function () {
console.log('ended')
this.load();
this.play();
});
var mousedown = true;
/*$(document).on('mousedown', function() {
mousedown = true;
})
$(document).on('mouseup', function() {
mousedown = false;
})*/
$(document).on('mousemove', function(e) {
if (mousedown) {
var posx = e.clientX;
var posy = e.clientY;
var startposx = 0;
var startposy = 0;
var newTransform = "translateZ(800px) rotateX("+ (startposx + posy * -1) +"deg) rotateY("+ (startposy + posx) +"deg) rotateZ("+0+"deg)";
$('.cube').css({
"transform": newTransform,
"-webkit-transform": newTransform,
})
/*
startposx = posx;
startposy = posy;
*/
}
})
/* scene wrapper */
.wrapper{
height: 300px;
margin-top:50px;
position:relative;
perspective: 800;
-webkit-perspective: 1600;
-moz-perspective: 800;
perspective-origin: 50% 1000px;
-webkit-perspective-origin: 50% 1000px;
-moz-perspective-origin: 50% 1000px;
}
/* cube wrapper */
.cube{
position: relative;
margin: 0 auto;
width: 2000px;
transform-style: preserve-3d;
transform: translateZ(1000px) rotateX(0deg) rotateY(10deg) rotateZ(0);
transform-origin: 1000px 1000px;
-webkit-transform-origin: 1000px 1000px;
-moz-transform-origin: 1000px 1000px;
/*transition: all 1000ms ease-in-out;*/
}
/* outer cube */
b{
position:absolute;
width:2000px;
height:2000px;
display:block;
background:rgba(255,255,255,0.1);
box-shadow:inset 0 0 30px rgba(0,0,0,0.2);
font-size:20px;
text-align:center;
line-height:2000px;
color:rgba(0,0,0,0.5);
font-family:sans-serif;
text-transform:uppercase;
/*transition: all 1s linear;*/
}
b video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 2000px;
height: 2000px;
background: black;
}
b img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 2000px;
height: 2000px;
}
b.back{
transform: translateZ(-1000px) rotateY(180deg);
}
b.right{
transform:rotateY(90deg) translateX(1000px);
transform-origin: top right;
}
b.left{
transform:rotateY(270deg) translateX(-1000px);
transform-origin: center left;
}
b.top{
transform:rotateX(90deg) translateY(-1000px);
transform-origin: top center;
}
b.bottom{
transform:rotateX(-90deg) translateY(1000px);
transform-origin: bottom center;
}
b.front{
transform: rotateX(0deg) translateZ(1000px);
}
b p {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: white;
z-index: 9;
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="cube">
<b class="front">
<video id="sourcevid" autoplay loop controls>
<source src="video/BigBuckBunny_640x360.mp4" type="video/mp4">
<source src="video/BigBuckBunny_640x360.ogv" type="video/ogg">
</video>
<p class="face">FRONT</p>
</b>
<b class="back">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">BACK</p>
</b>
<b class="top">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">TOP</p>
</b>
<b class="bottom">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">BOTTOM</p>
</b>
<b class="left">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">LEFT</p>
</b>
<b class="right">
<img src="http://www.ilikewallpaper.net/ipad-air-wallpapers/download/4139/Bali-Sunset-ipad-4-wallpaper-ilikewallpaper_com_1024.jpg">
<p class="face">RIGHT</p>
</b>
</div>
</div>
I am new to CSS HTML and JavaScrip.
I found this code to create a pattern of hexagons with pictures (see first code). When I press on a hexagon, I want it's picture to change to another picture (see second code).
First Code: Below is the JavaScript, CSS, and HTML.
//I don't know how my java script is going to be
/**
* Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
* http://stackoverflow.com/q/10062887/1397351
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.row {
margin: -18% 0;
text-align: center;
}
.row:first-child {
margin-top: -20%;
}
.hexagon {
position: relative;
display: inline-block;
overflow: hidden;
margin: 0 8.5%;
padding: 16%;
transform: rotate(30deg) skewY(30deg) scaleX(.866);
/* .866 = sqrt(3)/2 */
}
.hexagon:before,
.content:after {
display: block;
position: absolute;
/* 86.6% = (sqrt(3)/2)*100% = .866*100% */
top: 6.7%;
right: 0;
bottom: 6.7%;
left: 0;
/* 6.7% = (100% -86.6%)/2 */
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg);
/* 1.155 = 2/sqrt(3) */
background-color: rgba(30, 144, 255, .56);
background-size: cover;
content: '';
}
t:after {
content: attr(data-content);
}
.row:first-child .hexagon:first-child:before {
background-image: url(http://s10.postimg.org/o0vmcz3hl/Untitled_2_0.jpg);
}
.row:nth-child(2) .hexagon:nth-child(2):before {
background-image: url(http://s10.postimg.org/n7j0kcxgp/Untitled_2_0.jpg);
}
.row:nth-child(3) .hexagon:first-child:before {
background-image: url(http://s10.postimg.org/pen98a2qx/Untitled_2_0.jpg);
}
.row:nth-child(4) .hexagon:nth-child(2):before {
background-image: url(http://s10.postimg.org/ivuevcqjt/Untitled_2_0.jpg);
}
.row:nth-child(2) .hexagon:first-child:before {
background-image: url(http://s10.postimg.org/dvwynekx5/Untitled_2_0.jpg);
}
.row:nth-child(4) .hexagon:first-child:before {
background-image: url(http://s10.postimg.org/7ak8nn52h/Untitled_2_0.jpg);
}
.row:nth-child(5) .hexagon:first-child:before {
background-image: url(http://s10.postimg.org/i7lkceru1/Untitled_2_0.jpg);
}
<!-- content to be placed inside <body>…</body> -->
<div class='row'>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon'></div>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon'></div>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon'></div>
</div>
Second Code: Below is the JavaScript, CSS, and HTML.
var bodyObj, className, index;
bodyObj = document.getElementById('body');
index = 1;
className = [
'imageOne',
'imageTwo'
];
function updateIndex() {
if (index === 0) {
index = 1;
} else {
index = 0;
}
}
bodyObj.onclick = function(e) {
e.currentTarget.className = className[index];
updateIndex();
}
html,
body,
#body {
height: 100%;
width: 100%;
}
#body.imageOne {
background-image: url("http://s10.postimg.org/7ak8nn52h/Untitled_2_0.jpg");
}
#body.imageTwo {
background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");
}
<div id="body" class="imageOne"></div>
Result: jsfiddle
I added a new class .hexagon-hide (identical to .hexagon but with different background images), then I added the JQuery function to switch between .hexagon and .hexagon-hide with a click in the hexagon div.
$( ".hexagon" ).click(function() {
$( this ).toggleClass('hexagon hexagon-hide');
});
/**
* Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
* http://stackoverflow.com/q/10062887/1397351
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.row {
margin: -18% 0;
text-align: center;
}
.row:first-child {
margin-top: -20%;
}
.hexagon, .hexagon-hide {
position: relative;
display: inline-block;
overflow: hidden;
margin: 0 8.5%;
padding: 16%;
transform: rotate(30deg) skewY(30deg) scaleX(.866);
/* .866 = sqrt(3)/2 */
}
.hexagon:before, .hexagon-hide:before,
.content:after {
display: block;
position: absolute;
/* 86.6% = (sqrt(3)/2)*100% = .866*100% */
top: 6.7%;
right: 0;
bottom: 6.7%;
left: 0;
/* 6.7% = (100% -86.6%)/2 */
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg);
/* 1.155 = 2/sqrt(3) */
background-color: rgba(30, 144, 255, .56);
background-size: cover;
content: '';
}
t:after {
content: attr(data-content);
}
.row:first-child .hexagon:first-child:before {
background-image: url(http://s10.postimg.org/o0vmcz3hl/Untitled_2_0.jpg);
}
.row:nth-child(2) .hexagon:nth-child(2):before {
background-image: url(http://s10.postimg.org/n7j0kcxgp/Untitled_2_0.jpg);
}
.row:nth-child(3) .hexagon:first-child:before {
background-image: url(http://s10.postimg.org/pen98a2qx/Untitled_2_0.jpg);
}
.row:nth-child(4) .hexagon:nth-child(2):before {
background-image: url(http://s10.postimg.org/ivuevcqjt/Untitled_2_0.jpg);
}
.row:nth-child(2) .hexagon:first-child:before {
background-image: url(http://s10.postimg.org/dvwynekx5/Untitled_2_0.jpg);
}
.row:nth-child(4) .hexagon:first-child:before {
background-image: url(http://s10.postimg.org/7ak8nn52h/Untitled_2_0.jpg);
}
.row:nth-child(5) .hexagon:first-child:before {
background-image: url(http://s10.postimg.org/i7lkceru1/Untitled_2_0.jpg);
}
.row:first-child .hexagon-hide:first-child:before {
background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(2) .hexagon-hide:nth-child(2):before {
background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(3) .hexagon-hide:first-child:before {
background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(4) .hexagon-hide:nth-child(2):before {
background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(2) .hexagon-hide:first-child:before {
background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(4) .hexagon-hide:first-child:before {
background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
.row:nth-child(5) .hexagon-hide:first-child:before {
background-image: url("http://s27.postimg.org/qqz5ww52r/red_4.jpg");}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- content to be placed inside <body>…</body> -->
<div class='row'>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon'></div>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon'></div>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon'></div>
</div>