Reactive CSS Transitions
How do I make an reactive css transitions?
These simple CSS blocks are alive. Each block reacts to its neighbors by transforming border-radius and color. Endless block formations, endless reactions between them.. What is a reactive css transitions? How do you make a reactive css transitions? This script and codes were developed by Yogev Ahuvia on 20 August 2022, Saturday.
Reactive CSS Transitions Previews
Reactive CSS Transitions - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reactive CSS Transitions</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ input { display: block; position: absolute; appearance: none; cursor: pointer; z-index: 1; transform-origin: 50% 50%; transform: rotate(45deg); opacity: 0;
}
input:hover + .block { box-shadow: 1px 1px 1px 0px black, inset 1px 1px 1px 0px white; background: #ff9ea3;
}
input:checked + .block { background: #F9BF3B; border-radius: 100%;
}
input:checked + .block.Ns { border-top-left-radius: 5px;
}
input:checked + .block.NEs { border-top-left-radius: 5px; border-top-right-radius: 5px;
}
input:checked + .block.Es { border-top-right-radius: 5px;
}
input:checked + .block.SEs { border-top-right-radius: 5px; border-bottom-right-radius: 5px;
}
input:checked + .block.Ss { border-bottom-right-radius: 5px;
}
input:checked + .block.SWs { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
}
input:checked + .block.Ws { border-bottom-left-radius: 5px;
}
input:checked + .block.NWs { border-bottom-left-radius: 5px; border-top-left-radius: 5px;
}
.block { position: absolute; background: #F62459; border-radius: 5px; transition: border-radius 750ms, background 500ms; transform-origin: 50% 50%; transform: rotate(45deg); box-shadow: 1px 1px 1px 0px black, inset 1px 1px 1px 0px rgba(255, 255, 255, 0.8);
}
body { background: #222; overflow: hidden; position: absolute; width: 100%; height: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Reactive CSS Transitions - Script Codes CSS Codes
input { display: block; position: absolute; appearance: none; cursor: pointer; z-index: 1; transform-origin: 50% 50%; transform: rotate(45deg); opacity: 0;
}
input:hover + .block { box-shadow: 1px 1px 1px 0px black, inset 1px 1px 1px 0px white; background: #ff9ea3;
}
input:checked + .block { background: #F9BF3B; border-radius: 100%;
}
input:checked + .block.Ns { border-top-left-radius: 5px;
}
input:checked + .block.NEs { border-top-left-radius: 5px; border-top-right-radius: 5px;
}
input:checked + .block.Es { border-top-right-radius: 5px;
}
input:checked + .block.SEs { border-top-right-radius: 5px; border-bottom-right-radius: 5px;
}
input:checked + .block.Ss { border-bottom-right-radius: 5px;
}
input:checked + .block.SWs { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
}
input:checked + .block.Ws { border-bottom-left-radius: 5px;
}
input:checked + .block.NWs { border-bottom-left-radius: 5px; border-top-left-radius: 5px;
}
.block { position: absolute; background: #F62459; border-radius: 5px; transition: border-radius 750ms, background 500ms; transform-origin: 50% 50%; transform: rotate(45deg); box-shadow: 1px 1px 1px 0px black, inset 1px 1px 1px 0px rgba(255, 255, 255, 0.8);
}
body { background: #222; overflow: hidden; position: absolute; width: 100%; height: 100%;
}
Reactive CSS Transitions - Script Codes JS Codes
// Magic Number (don't go too low):
var blockSize = 100;
/* Reactive CSS Transitions © Yogev Ahuvia * ======================================= * These simple CSS blocks are alive. Each * block reacts to its neighbors by * transforming border-radius and color. * Endless block formations, endless * reactions between them. * --------------------------------------- * Works best on Google Chrome. */
var elements = [];
var x, y, index, isEvenRow;
var $container, $window;
function init() { $container = $('body'); $window = $(window); x = (blockSize * 0.25); y = -(blockSize * 0.5); index = 0; isEvenRow = false;
}
$(document).ready(function() { init(); build();
});
$(window).resize(function() { init(); build(); onCheck();
});
function build() { do { updateRowFlag(); if (!elements[index]) { createNewBlock(x,y,index); } else { var elemObj = elements[index]; $(elemObj.input).css({'left': x+'px', 'top': y+'px'}); $(elemObj.block).css({'left': x+'px', 'top': y+'px'}); } updateCoords(); index++; } while (y <= $window.height() + blockSize);
}
function createNewBlock(x,y,index) { var style = ' style="width: '+blockSize+'px; height: '+blockSize+'px; left: '+x+'px; top: '+y+'px;"'; var $input = $('<input type="checkbox"'+style+'></input>'); var $block = $('<div class="block"'+style+'></div>'); $input.on('click', onCheck); elements.push({ input : $input[0], block : $block[0] }); $container.append($input, $block);
}
function updateRowFlag() { if (x > $window.width()) { isEvenRow = !isEvenRow; x = (isEvenRow ? -(blockSize*0.5) : (blockSize*0.25)); y += (blockSize*0.75); }
}
function updateCoords() { x += blockSize + (blockSize * 0.5);
}
function getNeighbours(index, elem) { var neighbors = { Ne: undefined, NEe: undefined, Ee: undefined, SEe: undefined, Se: undefined, SWe: undefined, We: undefined, NWe: undefined }; var Nc = { x : elem.offsetLeft + (elem.offsetWidth / 2), y : elem.offsetTop - elem.offsetHeight }; var NEc = { x : elem.offsetLeft + elem.offsetWidth, y : elem.offsetTop - (elem.offsetHeight / 2) }; var SEc = { x : elem.offsetLeft + elem.offsetWidth, y : elem.offsetTop + elem.offsetHeight }; var Sc = { x : elem.offsetLeft + (elem.offsetWidth / 2), y : elem.offsetTop + (elem.offsetHeight * 2) }; var SWc = { x : elem.offsetLeft, y : elem.offsetTop + elem.offsetHeight }; var NWc = { x : elem.offsetLeft, y : elem.offsetTop - (elem.offsetHeight / 2) }; for (var i = 0; i < elements.length; i++) { var cur = elements[i].input; if (isCoordOnElement(Nc.x, Nc.y, cur)) { neighbors.Ne = cur; } else if (isCoordOnElement(NEc.x, NEc.y, cur)) { neighbors.NEe = cur; } else if (isCoordOnElement(SEc.x, SEc.y, cur)) { neighbors.SEe = cur; } else if (isCoordOnElement(Sc.x, Sc.y, cur)) { neighbors.Se = cur; } else if (isCoordOnElement(SWc.x, SWc.y, cur)) { neighbors.SWe = cur; } else if (isCoordOnElement(NWc.x, NWc.y, cur)) { neighbors.NWe = cur; } } if (elements[index-1]) neighbors.We = elements[index-1].input; if (elements[index+1]) neighbors.Ee = elements[index+1].input; return neighbors;
}
function isCoordOnElement(x, y, elem) { if (x > elem.offsetLeft && x < (elem.offsetLeft + elem.offsetWidth) && y > elem.offsetTop && y < (elem.offsetTop + elem.offsetHeight)) { return true; } return false;
}
function clearEffects($elem) { $elem.removeClass('Ns NWs NEs NWNEs Es SEs NESEs Ss SWs SESWs Ws NWs NWSWs NSs WEs');
}
function onCheck(e) { for (var i = 0; i < elements.length; i++) { var elemObj = elements[i]; var neighbors = getNeighbours(i, elemObj.input); var $block = $(elemObj.block); clearEffects($block); if (neighbors.Ne && neighbors.Ne.checked) $block.addClass('Ns'); if (neighbors.NEe && neighbors.NEe.checked) $block.addClass('NEs'); if (neighbors.Ee && neighbors.Ee.checked) $block.addClass('Es'); if (neighbors.SEe && neighbors.SEe.checked) $block.addClass('SEs'); if (neighbors.Se && neighbors.Se.checked) $block.addClass('Ss'); if (neighbors.SWe && neighbors.SWe.checked) $block.addClass('SWs'); if (neighbors.We && neighbors.We.checked) $block.addClass('Ws'); if (neighbors.NWe && neighbors.NWe.checked) $block.addClass('NWs'); }
}
| Developer | Yogev Ahuvia |
| Username | kindofone |
| Uploaded | August 20, 2022 |
| Rating | 4.5 |
| Size | 4,405 Kb |
| Views | 20,240 |
Do you need developer help for Reactive CSS Transitions?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Yogev Ahuvia (kindofone) Script Codes
| Name | Size |
| Living Interfaces - Talk | 7,280 Kb |
| 3D Cube of 3D Balls | 4,507 Kb |
| Thumbnail Animation Effects | 10,393 Kb |
| Subtle Buttons | 4,010 Kb |
| CSS Filter Glass | 7,188 Kb |
| CSS-Only Countdown Clock | 5,974 Kb |
| A Pen by Yogev Ahuvia | 1,941 Kb |
| Live Bricks | 7,014 Kb |
| Bouncy Icon Select Menu | 6,673 Kb |
| Spinning Top | 6,037 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Popover Example | Seanboom | 2,429 Kb |
| Expert Help | SinceSidSlid | 4,064 Kb |
| Voting App - register | MatheusLima92 | 1,948 Kb |
| CSS Piano | Dannystyle | 5,138 Kb |
| JQuery FullScreen Overlay | _codemics | 2,252 Kb |
| JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
| ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
| Canvas Background Effect | Sonick | 3,513 Kb |
| Glitchy Text Effect | Kescoe | 2,208 Kb |
| How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!