The wheel of social fortune

Developer
Karsten Buckstegge
Size
6,570 Kb
Views
36,432
  1. The wheel of social fortune Previews
  2. The wheel of social fortune HTML Codes
  3. The wheel of social fortune CSS Codes
  4. The wheel of social fortune JS Codes

How do I make an the wheel of social fortune?

You are overwhelmed with social networks? You don't know where too like/+1/follow first? Here is your solution: . What is a the wheel of social fortune? How do you make a the wheel of social fortune? This script and codes were developed by Karsten Buckstegge on 10 September 2022, Saturday.

The wheel of social fortune Previews
IQ Test

The wheel of social fortune - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The wheel of social fortune</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <meta charset="UTF-8" /> <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'> <title>Get Social</title>
</head>
<body> <!-- add svg icons --> <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none"> <symbol id="fb" viewBox="0 0 430.113 430.114"> <path d="M158.081,83.3c0,10.839,0,59.218,0,59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805 c0,0,5.601-34.721,8.316-72.685c-7.784,0-67.784,0-67.784,0s0-42.127,0-49.511c0-7.4,9.717-17.354,19.321-17.354 c9.586,0,29.818,0,48.557,0c0-9.859,0-43.924,0-75.385c-25.016,0-53.476,0-66.021,0C155.878-0.004,158.081,72.48,158.081,83.3z"></path> </symbol> <symbol id="twitter" viewBox="0 0 430.117 430.117"> <path d="M381.384,198.639c24.157-1.993,40.543-12.975,46.849-27.876 c-8.714,5.353-35.764,11.189-50.703,5.631c-0.732-3.51-1.55-6.844-2.353-9.854c-11.383-41.798-50.357-75.472-91.194-71.404 c3.304-1.334,6.655-2.576,9.996-3.691c4.495-1.61,30.868-5.901,26.715-15.21c-3.5-8.188-35.722,6.188-41.789,8.067 c8.009-3.012,21.254-8.193,22.673-17.396c-12.27,1.683-24.315,7.484-33.622,15.919c3.36-3.617,5.909-8.025,6.45-12.769 C241.68,90.963,222.563,133.113,207.092,174c-12.148-11.773-22.915-21.044-32.574-26.192 c-27.097-14.531-59.496-29.692-110.355-48.572c-1.561,16.827,8.322,39.201,36.8,54.08c-6.17-0.826-17.453,1.017-26.477,3.178 c3.675,19.277,15.677,35.159,48.169,42.839c-14.849,0.98-22.523,4.359-29.478,11.642c6.763,13.407,23.266,29.186,52.953,25.947 c-33.006,14.226-13.458,40.571,13.399,36.642C113.713,320.887,41.479,317.409,0,277.828 c108.299,147.572,343.716,87.274,378.799-54.866c26.285,0.224,41.737-9.105,51.318-19.39 C414.973,206.142,393.023,203.486,381.384,198.639z"></path> </symbol> <symbol id="google" viewBox="0 0 90 90"> <path d="M74.499,0H50.144c-6.382,0-14.421,0.942-21.158,6.49c-5.09,4.374-7.566,10.392-7.566,15.828 c0,9.211,7.094,18.546,19.625,18.546c1.182,0,2.477-0.12,3.787-0.235c-0.592,1.413-1.189,2.594-1.189,4.605 c0,3.662,1.893,5.902,3.547,8.029c-5.314,0.353-15.249,0.942-22.583,5.428c-6.975,4.143-9.107,10.16-9.107,14.414 C15.499,81.846,23.778,90,40.923,90c20.336,0,31.098-11.22,31.098-22.33c0-8.143-4.729-12.164-9.932-16.534l-4.258-3.305 c-1.295-1.065-3.068-2.479-3.068-5.08c0-2.597,1.773-4.254,3.307-5.789c4.964-3.896,9.933-8.03,9.933-16.77 c0-8.979-5.68-13.704-8.396-15.947h7.334L74.499,0z M64.103,72.279c0,7.322-6.033,12.753-17.385,12.753 c-12.648,0-20.809-6.024-20.809-14.405c0-8.393,7.568-11.218,10.166-12.164c4.969-1.656,11.352-1.891,12.414-1.891 c1.184,0,1.775,0,2.725,0.115C60.202,63.064,64.103,66.257,64.103,72.279z M54.642,34.249c-1.893,1.886-5.088,3.305-8.045,3.305 c-10.164,0-14.772-13.113-14.772-21.023c0-3.072,0.592-6.258,2.598-8.74c1.893-2.362,5.201-3.899,8.277-3.899 c9.812,0,14.899,13.229,14.899,21.73C57.599,27.752,57.358,31.528,54.642,34.249z"></path> </symbol> <symbol id="vimeo" viewBox="0 0 430.118 430.118"> <path d="M367.243,28.754c-59.795-1.951-100.259,31.591-121.447,100.664c10.912-4.494,21.516-6.762,31.858-6.762 c21.804,0,31.455,12.237,28.879,36.776c-1.278,14.86-10.911,36.482-28.879,64.858c-18.039,28.423-31.513,42.61-40.464,42.61 c-11.621,0-22.199-21.958-31.857-65.82c-3.239-12.918-9.031-45.812-17.324-98.765c-7.775-49.046-28.32-71.962-61.727-68.741 C112.15,34.873,90.98,47.815,62.726,72.308C42.113,91.032,21.228,109.761,0,128.471l20.225,26.112 c19.303-13.562,30.595-20.311,33.731-20.311c14.802,0,28.625,23.219,41.488,69.651c11.53,42.644,23.158,85.23,34.744,127.812 c17.256,46.466,38.529,69.708,63.552,69.708c40.473,0,90.028-38.065,148.469-114.223c56.537-72.909,85.725-130.352,87.694-172.341 C432.498,58.764,411.613,30.028,367.243,28.754z"></path> </symbol> </svg> <h1>TRY YOUR LUCK!</h1> <section class="main"> <div class="buttons"> <div class="button button--fb"> <a href="#"> <svg width="25" height="25"> <use xlink:href="#fb" width="100%" height="100%" fill="currentColor"></use> </svg> </a> </div> <div class="button button--tw"> <a href="https://twitter.com/mr_bambule" target="blank"> <svg width="25" height="25"> <use xlink:href="#twitter" width="100%" height="100%" fill="currentColor"></use> </svg> </a> </div> <div class="button button--gp"> <a href="#"> <svg width="25" height="25"> <use xlink:href="#google" width="100%" height="100%" fill="currentColor"></use> </svg> </a> </div> <div class="button button--vm"> <a href="https://vimeo.com/karstenbuckstegge" target="blank"> <svg width="25" height="25"> <use xlink:href="#vimeo" width="100%" height="100%" fill="currentColor"></use> </svg> </a> </div> </div> <div class="all"> <div class="all__corner all--fb"> <svg width="25" height="25"> <use xlink:href="#fb" width="100%" height="100%" fill="currentColor"></use> </svg> </div> <div class="all__corner all--tw"> <svg width="25" height="25"> <use xlink:href="#twitter" width="100%" height="100%" fill="currentColor"></use> </svg> </div> <div class="all__corner all--gp"> <svg width="25" height="25"> <use xlink:href="#google" width="100%" height="100%" fill="currentColor"></use> </svg> </div> <div class="all__corner all--vm"> <svg width="25" height="25"> <use xlink:href="#vimeo" width="100%" height="100%" fill="currentColor"></use> </svg> </div> </div> <div class="stopper1"></div> <div class="stopper2"></div> </section>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

The wheel of social fortune - Script Codes CSS Codes

html { width: 100%; height: 100%; background: #d1d4d6;
}
body { font-size: 25px; text-align: center; color: #FFF; overflow: hidden;
}
section { width: 201px; margin: 50px auto;
}
h1 { margin-top: 50px; font-size: 40pt; font-family: 'Josefin Slab', serif; color: #3B5998;
}
a, a:hover, a:visited { text-decoration: none; color: #fff;
}
.stopper1 { width: 10px; height: 51px; background: linear-gradient(45deg, rgba(32, 124, 202, 0) 50%, #a5a5a5 50%) no-repeat; position: absolute; margin-top: -25px; z-index: 12; margin-left: 90px;
}
.stopper1:before { content: " "; width: 10px; height: 51px; background: linear-gradient(45deg, rgba(32, 124, 202, 0) 50%, rgba(235, 235, 235, 0.5) 50%, rgba(235, 235, 235, 0.5) 60%) no-repeat; position: absolute; top: 3px; left: 0px;
}
.stopper2 { width: 10px; height: 51px; background: linear-gradient(-45deg, rgba(32, 124, 202, 0) 50%, #a5a5a5 50%) no-repeat; position: absolute; margin-top: -25px; z-index: 12; margin-left: 100px;
}
.stopper2:before { content: " "; width: 10px; height: 51px; background: linear-gradient(-45deg, rgba(32, 124, 202, 0) 50%, rgba(235, 235, 235, 0.2) 50%, rgba(235, 235, 235, 0.5) 60%) no-repeat; position: absolute; top: 3px; left: 0px;
}
.all { width: 200px; height: 200px; margin-top: -10px; -webkit-transition: all 3s cubic-bezier(0.05, 0.95, 0.95, 0.95); transition: all 3s cubic-bezier(0.05, 0.95, 0.94, 0.95); z-index: 10; position: absolute; cursor: pointer;
}
.all:after { content: " "; width: 20%; height: 20%; top: 40%; left: 40%; background: #FFF; z-index: 11; display: block; position: relative; border-radius: 50%;
}
.all__corner { position: relative; width: 50%; height: 50%; float: left; z-index: 5;
}
.all__corner svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; -webkit-transition: all 2.1s ease; transition: all 2.1s ease;
}
.all--fb { border-radius: 100% 0 0 0; background: #3B5998; background: -webkit-linear-gradient(left top, #4c70ba 0%, #3B5998 70%); background: linear-gradient(to right bottom, #4c70ba 0%, #3b5998 70%);
}
.all--tw { border-radius: 0 100% 0 0; background: #4099FF; background: -webkit-linear-gradient(left top, #73b4ff 0%, #4099FF 70%); background: linear-gradient(to right bottom, #73b4ff 0%, #4099ff 70%);
}
.all--gp { border-radius: 0 0 0 100%; background: #d34836; background: -webkit-linear-gradient(left top, #dc6e60 0%, #d34836 70%); background: linear-gradient(to right bottom, #dc6e60 0%, #d34836 70%);
}
.all--vm { border-radius: 0 0 100% 0; background: #162221; background: -webkit-linear-gradient(left top, #2a413f 0%, #162221 70%); background: linear-gradient(to right bottom, #2a413f 0%, #162221 70%);
}
.buttons { z-index: -1;
}
.button { width: 150px; height: 50px; margin-top: 50px; left: 50%; transform: translateX(-50%); background: #111; float: left; opacity: 0; position: absolute; z-index: -1; -webkit-transition: all 1.2ss ease; transition: all 1.2s ease;
}
.button.active { -webkit-transition: all 1.2s ease 3s; transition: all 1.2s ease 3s;
}
.button svg { font-size: 30px; margin-top: 10px;
}
.button--vm { background: #162221; border-radius: 8px;
}
.button--vm.active { margin-top: 220px; opacity: 1;
}
.button--gp { background: #d34836; border-radius: 8px;
}
.button--gp.active { margin-top: 220px; opacity: 1;
}
.button--tw { background: #4099FF; border-radius: 8px;
}
.button--tw.active { margin-top: 220px; opacity: 1;
}
.button--fb { background: #3B5998; border-radius: 8px;
}
.button--fb.active { margin-top: 220px; opacity: 1;
}

The wheel of social fortune - Script Codes JS Codes

$(".all").click(function(){ // how many times should the wheel rotate at max (calculate + 1) var maxRotations = 6; // how many times at min var minRotations = 2; // calculate degree values var maxDeg = 360 * maxRotations; var minDeg = 360 * minRotations; if ($(".all").hasClass("active")){ $(this).css('transform', 'rotate(0deg)'); $(this).removeClass("active"); $('.button').removeClass("active"); } else { // create random number var randomNum = Math.ceil(Math.random() * maxDeg) + minDeg; // add random rotation to wheel $(this).css('transform', 'rotate(' + randomNum + 'deg)'); // add active class $('.all').addClass("active"); var fullRotations = Math.floor(randomNum/360); var partRotation = (randomNum/360) - fullRotations; // determin active social network if (partRotation >= 0.5 && partRotation < 0.75){ $('.button--vm').addClass("active"); } else if ( partRotation >= 0.75 && partRotation < 1){ $('.button--tw').addClass("active"); } else if (partRotation >= 0 && partRotation < 0.25){ $('.button--fb').addClass("active"); } else { $('.button--gp').addClass("active"); } }
});
The wheel of social fortune - Script Codes
The wheel of social fortune - Script Codes
Home Page Home
Developer Karsten Buckstegge
Username MrBambule
Uploaded September 10, 2022
Rating 4
Size 6,570 Kb
Views 36,432
Do you need developer help for The wheel of social fortune?

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!

Karsten Buckstegge (MrBambule) Script Codes
Name
Responsive CSS arrow bar with transparent borders
Scalable animated css menu button
Base64 SVG Me
Even More Brokener TV
Sliding Skill-Diagramm
The wheel of social
Simple React Slider
Responsive focuspoint on image with object-position
A Pen by Karsten Buckstegge
CSS3 Hover Button
Create amazing SEO content 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!