Use the attached files to copy the examples shown in our 'Getting Creative with Home Pages: Part 2' Blog Post.
Kaleidoscope Text:
Copy and paste the following code into your portal's Custom HTML box:
<main> <h1 class="text"> Hello {{ContactName}}! </h1> </main>
Copy and paste the following code into your portal's Custom CSS box:
.page-home .inside-page-content h1{ color:transparent; } .page-home { background: black; margin: 0; } main { height: 90vh; display: flex; justify-content: center; align-items: center; } .text { background: url(https://media.giphy.com/media/3o6Ztb45EYezY9x9gQ/giphy.gif); background-size: contain; background-position: top left; -webkit-background-clip: text; color: transparent; font-size: 200px; font-weight: bold; font-family: sans-serif; }
Background-Colour-Changing Buttons:
Copy and paste the following code into your portal's Custom HTML box:
<nav class="menubuttons"> <a href="#" class="menu__item menu__item--yellow menu__item--active" data-background="e4a924"> <svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" style="" viewBox="0 0 460.298 460.297" x="0px" y="0px" width="460.298px" height="460.297px" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1"> <g> <g> <path d="M 230.149 120.939 L 65.986 256.274 c 0 0.191 -0.048 0.472 -0.144 0.855 c -0.094 0.38 -0.144 0.656 -0.144 0.852 v 137.041 c 0 4.948 1.809 9.236 5.426 12.847 c 3.616 3.613 7.898 5.431 12.847 5.431 h 109.63 V 303.664 h 73.097 v 109.64 h 109.629 c 4.948 0 9.236 -1.814 12.847 -5.435 c 3.617 -3.607 5.432 -7.898 5.432 -12.847 V 257.981 c 0 -0.76 -0.104 -1.334 -0.288 -1.707 L 230.149 120.939 Z" /> </g> </g><path d="M 457.122 225.438 L 394.6 173.476 V 56.989 c 0 -2.663 -0.856 -4.853 -2.574 -6.567 c -1.704 -1.712 -3.894 -2.568 -6.563 -2.568 h -54.816 c -2.666 0 -4.855 0.856 -6.57 2.568 c -1.711 1.714 -2.566 3.905 -2.566 6.567 v 55.673 l -69.662 -58.245 c -6.084 -4.949 -13.318 -7.423 -21.694 -7.423 c -8.375 0 -15.608 2.474 -21.698 7.423 L 3.172 225.438 c -1.903 1.52 -2.946 3.566 -3.14 6.136 c -0.193 2.568 0.472 4.811 1.997 6.713 l 17.701 21.128 c 1.525 1.712 3.521 2.759 5.996 3.142 c 2.285 0.192 4.57 -0.476 6.855 -1.998 L 230.149 95.817 l 197.57 164.741 c 1.526 1.328 3.521 1.991 5.996 1.991 h 0.858 c 2.471 -0.376 4.463 -1.43 5.996 -3.138 l 17.703 -21.125 c 1.522 -1.906 2.189 -4.145 1.991 -6.716 C 460.068 229.007 459.021 226.961 457.122 225.438 Z" /> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg> </a> <a href="/ProductList.aspx" class="menu__item menu__item--red" data-background="c92142"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="475.084px" height="475.085px" viewBox="0 0 475.084 475.085" style="enable-background:new 0 0 475.084 475.085;" xml:space="preserve"> <g> <g> <path d="M365.446,401.998c0,10.092,3.579,18.702,10.711,25.834c7.132,7.139,15.749,10.711,25.845,10.711 c10.081,0,18.698-3.572,25.83-10.711c7.139-7.132,10.711-15.742,10.711-25.834s-3.568-18.702-10.711-25.841 c-7.132-7.132-15.749-10.704-25.83-10.704c-10.096,0-18.713,3.572-25.845,10.704C369.025,383.296,365.446,391.906,365.446,401.998 z"/> <path d="M469.658,78.51c-3.618-3.617-7.898-5.426-12.848-5.426H113.918c-0.193-1.331-0.621-3.756-1.287-7.277 c-0.666-3.523-1.188-6.329-1.569-8.425c-0.383-2.087-1.093-4.611-2.142-7.561c-1.047-2.952-2.284-5.286-3.711-6.995 c-1.425-1.718-3.328-3.189-5.708-4.43c-2.378-1.233-5.092-1.853-8.136-1.853H18.276c-4.952,0-9.234,1.812-12.85,5.424 C1.809,45.583,0,49.868,0,54.816s1.809,9.231,5.426,12.847c3.619,3.617,7.902,5.424,12.85,5.424h58.237l50.532,234.976 c-0.378,0.76-2.329,4.373-5.852,10.848c-3.521,6.475-6.328,12.135-8.42,16.988c-2.093,4.859-3.14,8.616-3.14,11.279 c0,4.948,1.809,9.232,5.424,12.854c3.621,3.606,7.902,5.421,12.851,5.421h18.272h255.815h18.261c4.948,0,9.232-1.814,12.847-5.421 c3.62-3.621,5.427-7.905,5.427-12.854c0-4.949-1.807-9.233-5.427-12.847c-3.614-3.614-7.898-5.428-12.847-5.428h-262.66 c4.57-9.138,6.854-15.222,6.854-18.268c0-1.909-0.238-4.004-0.715-6.283s-1.047-4.805-1.713-7.569 c-0.667-2.752-1.093-4.799-1.283-6.133l298.077-34.831c4.753-0.575,8.658-2.614,11.703-6.14c3.046-3.518,4.565-7.562,4.565-12.133 V91.363C475.082,86.415,473.278,82.132,469.658,78.51z"/> <path d="M109.632,401.998c0,10.092,3.567,18.702,10.706,25.834c7.141,7.139,15.75,10.711,25.841,10.711 c10.085,0,18.699-3.572,25.835-10.711c7.139-7.132,10.71-15.742,10.71-25.834s-3.568-18.702-10.71-25.841 c-7.137-7.132-15.75-10.704-25.835-10.704c-10.09,0-18.704,3.572-25.841,10.704C113.203,383.296,109.632,391.906,109.632,401.998z "/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg> </a> <a id="profilelink" class="menu__item menu__item--green" data-background="37b983"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <g id="ui_x5F_spec_x5F_header_copy_2"> </g> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded"> <path d="M12,12c2.21,0,4-1.79,4-4s-1.79-4-4-4S8,5.79,8,8S9.79,12,12,12z M12,14c-2.67,0-8,1.34-8,4v1c0,0.55,0.45,1,1,1h14 c0.55,0,1-0.45,1-1v-1C20,15.34,14.67,14,12,14z"/> </g> </svg> </a> <a href="https://dmg.orderprintnow.com/PortalPage.aspx?PortalPageId=044141d8-9cf2-40dc-9c4a-069635c4e8f3&PortalId=90ef91db-a399-40a4-98d3-364da3cef9ab" class="menu__item menu__item--purple" data-background="9f32b8"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <g id="ui_x5F_spec_x5F_header_copy_2"> </g> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded_1_"> <g id="ui_x5F_spec_x5F_header_copy_6"> </g> <path d="M20,2H4C2.9,2,2.01,2.9,2.01,4L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M7,9h10c0.55,0,1,0.45,1,1v0 c0,0.55-0.45,1-1,1H7c-0.55,0-1-0.45-1-1v0C6,9.45,6.45,9,7,9z M13,14H7c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6 c0.55,0,1,0.45,1,1v0C14,13.55,13.55,14,13,14z M17,8H7C6.45,8,6,7.55,6,7v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0 C18,7.55,17.55,8,17,8z"/> </g> </svg> </a> </nav>
Copy and paste the following code into your portal's Custom CSS box:
.page-portalpage-044141d8-9cf2-40dc-9c4a-069635c4e8f3 container {width:100%;padding:0px;margin:0px;} .page-home .inside-page-content { height: 90vh; font-size: 1.3vw; } @media (min-width: 768px) { .page-home .inside-page-content { font-size: 62.5%; } } .page-home { background-color: #e4a924; body { height: 90vh; display: flex; align-items: center; justify-content: center; background-color: #e4a924; transition: background-color 0.55s; will-change: background-color; margin: 0; } } .menubuttons { margin:20% 35% 0% 35%; } .menu__item { width: 8.5rem; height: 8.5rem; border-radius: 12.5rem; background: #f3f3f3; display: inline-block; margin-left: 1.1rem; animation-name: close; animation-duration: 0s; will-change: width background-color; transition: background 0.55s; vertical-align: top; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0px 1px rgba(0,0,0, 0.1); } .menu__item:first-child { margin-left: 0; } .menu__item--animate { animation-duration: 0.5s; } .menu__item--active { width: 17rem; animation-name: open; } @keyframes open { 0% {width: 8.5rem;} 40% {width: 18.5rem;} 80% {width: 17rem;} 100% {width: 17rem;} } @keyframes close { 0% {width: 17rem;} 40% {width: 7rem;} 80% {width: 8.5rem;} 100% {width: 8.5rem;} } .menu__item--active.menu__item--yellow { background: #fabe2b; } .menu__item--active.menu__item--red { background: #f43768; } .menu__item--active.menu__item--green { background: #45e1a3; } .menu__item--active.menu__item--purple { background: #c152da; } .menu__item svg { fill: #a6a6a6; width: 4.5rem; height: 4.5rem; transtiion: fill 0.55s; will-change: fill; } .menu__item--active svg { fill: #fffdfe; } .menu__item menu__item--red .menu__item--active menu__item--animate{ position:relative; content:"Click here to Shop!"; }
Copy and paste the following code into your portal's Custom Javascript box:
function dmLoad(){ var insidepage = document.getElementsByClassName('inside-page-content'); const menuItems = document.querySelectorAll('.menu__item'); let menuItemActive = document.querySelector('.menu__item--active'); // --- // App // --- for (var i = 0; i < menuItems.length; i++) { menuItems[i].addEventListener('click', buttonClick); } // --------- // Functions // --------- function buttonClick() { if (!this.classList.contains('menu__item--active')) { document.body.style.backgroundColor = `#${this.getAttribute('data-background')}` menuItemActive.classList.remove('menu__item--active'); this.classList.add('menu__item--active'); menuItemActive.classList.add('menu__item--animate'); this.classList.add('menu__item--animate'); menuItemActive = this; } } var x = document.links.namedItem("ContentPlaceHolder1_hplProfileEdit").href; document.getElementById("profilelink").href = x; };
3D Product Carousel:
Copy and paste the following code into your portal's Custom HTML box:
<div id="drag-container"> <div id="spin-container"> <!-- Add your images here --> <img src="https://images.unsplash.com/photo-1556943418-0e5712249b9d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt=""> <img src="https://images.unsplash.com/photo-1482876555840-f31c5ebbff1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" alt=""> <img src="https://images.unsplash.com/photo-1516409590654-e8d51fc2d25c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1012&q=80" alt=""> <img src="https://images.unsplash.com/photo-1456456496250-d5e7c0a9b44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" alt=""> <img src="https://images.unsplash.com/photo-1469708105586-50396e970312?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""> <img src="https://images.unsplash.com/photo-1494830723470-a8f5b3918a99?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""> <!-- Example image with link --> <a target="_blank" href="https://images.unsplash.com/photo-1521685468847-de0a1a3c41a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"> <img src="https://images.unsplash.com/photo-1521685468847-de0a1a3c41a8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""> </a> <img src="https://images.unsplash.com/photo-1543278418-d8f5bd77465d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt=""> <!-- Text at center of ground - if wanted --> <p> </p> </div> <div id="ground"></div> </div>
Copy and paste the following code into your portal's Custom CSS box:
.page-home .container { width:100%; padding:0px; margin:0px; } #ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_pnlCustomContent { width:100%; margin-top:15%; } #ContentPlaceHolder1_ContentPlaceHolder1_pnlCustomContent{ width:100%; margin-top:15%; } .page-home .inside-page-content { height: 90vh; /* for touch screen */ touch-action: none; } .page-home .inside-page-content { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; background: #111; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #drag-container, #spin-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; margin: auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); } #drag-container img { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 200px; font-size: 50px; text-align: center; -webkit-box-shadow: 0 0 8px #fff; box-shadow: 0 0 8px #fff; -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005); } #drag-container img:hover{ -webkit-box-shadow: 0 0 15px #fffd; box-shadow: 0 0 15px #fffd; -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007); } #drag-container p { font-family: Serif; position: absolute; top: 100%; left: 50%; -webkit-transform: translate(-50%,-50%) rotateX(90deg); transform: translate(-50%,-50%) rotateX(90deg); color: #fff; } #ground { width: 900px; height: 900px; position: absolute; top: 100%; left: 50%; -webkit-transform: translate(-50%,-50%) rotateX(90deg); transform: translate(-50%,-50%) rotateX(90deg); background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent); } @-webkit-keyframes spin { from{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to{ -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes spin { from{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to{ -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes spinRevert { from{ -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } to{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes spinRevert { from{ -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } to{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } }
Copy and paste the following code into your portal's Custom Javascript box:
function dmLoad() { if ($('#drag-container').length > 0) { // You can change global variables here: var radius = 280; // how big of the radius var autoRotate = true; // auto rotate or not var rotateSpeed = -60; // unit: seconds/360 degrees var imgWidth = 180; // width of images (unit: px) var imgHeight = 180; // height of images (unit: px) var bgMusicURL = null; var bgMusicControls = true; // ===================== start ======================= // animation start after 1000 milis setTimeout(init, 1000); var odrag = document.getElementById('drag-container'); var ospin = document.getElementById('spin-container'); var aImg = ospin.getElementsByTagName('img'); var aVid = ospin.getElementsByTagName('video'); var aEle = [...aImg, ...aVid]; // combine 2 arrays // Size of images ospin.style.width = imgWidth + "px"; ospin.style.height = imgHeight + "px"; // Size of ground - depend on radius var ground = document.getElementById('ground'); ground.style.width = radius * 3 + "px"; ground.style.height = radius * 3 + "px"; function init(delayTime) { for (var i = 0; i < aEle.length; i++) { aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)"; aEle[i].style.transition = "transform 1s"; aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s"; } } function applyTranform(obj) { // Constrain the angle of camera (between 0 and 180) if(tY > 180) tY = 180; if(tY < 0) tY = 0; // Apply the angle obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)"; } function playSpin(yes) { ospin.style.animationPlayState = (yes?'running':'paused'); } var sX, sY, nX, nY, desX = 0, desY = 0, tX = 0, tY = 10; // auto spin if (autoRotate) { var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert'); ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`; } // add background music if (bgMusicURL) { document.getElementById('music-container').innerHTML += ` <audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop> <p>If you are reading this, it is because your browser does not support the audio element.</p> </audio> `; } // setup events document.onpointerdown = function (e) { clearInterval(odrag.timer); e = e || window.event; var sX = e.clientX, sY = e.clientY; this.onpointermove = function (e) { e = e || window.event; var nX = e.clientX, nY = e.clientY; desX = nX - sX; desY = nY - sY; tX += desX * 0.1; tY += desY * 0.1; applyTranform(odrag); sX = nX; sY = nY; }; this.onpointerup = function (e) { odrag.timer = setInterval(function () { desX *= 0.95; desY *= 0.95; tX += desX * 0.1; tY += desY * 0.1; applyTranform(odrag); playSpin(false); if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) { clearInterval(odrag.timer); playSpin(true); } }, 17); this.onpointermove = this.onpointerup = null; }; return false; }; document.onmousewheel = function(e) { e = e || window.event; var d = e.wheelDelta / 20 || -e.detail; radius += d; init(1); }; } };