Vertical alignment on mobile devices and randomised colour javascript - javascript
I'm trying to make some tweaks to this website and having a bit of trouble.
http://accoutrements.studio
The 'Accoutrements' logo should be horizontally and vertically centred in the page. This seems to work fine on a desktop device, but it mis-aligns on a mobile device. See the screenshot for a better example — https://i.imgur.com/GnRSEmn.png
There's also a script to randomise the colour every time you click on the logo. However I'd like to have it so the page loads in black and white and then only randomises on click. At the moment I've created two separate pages (/index and /colour), but is there anyway to edit the javascipt so I don't have two separate pages?
There also seems to be a black box when you hover over the logo at smaller screen sizes. I'm not too sure why this is — https://i.imgur.com/pGA7d8U.png
Sorry for all of the questions and thank you!
Index
<!DOCTYPE html>
<html>
<head>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/manifest.json" rel="manifest">
<meta content="#ffffff" name="theme-color">
<meta charset="UTF-8">
<meta content="Accoutrements is a design studio established in 2016 by Jacob D'Rozario and Joseph Ng." name="description">
<meta content="Accoutrements, Design, Manchester, Photography, Publishing, Screen Printing" name="keywords">
<meta content="index,follow" name="robot">
<meta content="© 2017 Accoutrements. All rights reserved." name="copyright">
<meta content="Accoutrements" name="author">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Accoutrements</title>
<link rel="stylesheet" type="text/css" href="accoutrements.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
</head>
<body>
<div class="corner_link about">
About
</div>
<div class="corner_link shop">
Shop
</div>
<div class="corner_link catalogue">
Catalogue
</div>
<div class="corner_link instagram">
Instagram
</div>
<div class="accoutrements">
<a href="/colour"><svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
<title>Accoutrements</title>
<path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
<path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
<path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
<polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
<polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
<polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
<polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
<path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
<path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
<path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
<path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg></a>
</div>
</body>
</html>
Colour
<!DOCTYPE html>
<html>
<head>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/manifest.json" rel="manifest">
<meta content="#ffffff" name="theme-color">
<meta charset="UTF-8">
<meta content="Accoutrements is a design studio established in 2016 by Jacob D'Rozario and Joseph Ng." name="description">
<meta content="Accoutrements, Design, Manchester, Photography, Publishing, Screen Printing" name="keywords">
<meta content="index,follow" name="robot">
<meta content="© 2017 Accoutrements. All rights reserved." name="copyright">
<meta content="Accoutrements" name="author">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Accoutrements</title>
<link rel="stylesheet" type="text/css" href="accoutrements.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
</head>
<body>
<div class="corner_link about">
About
</div>
<div class="corner_link shop">
Shop
</div>
<div class="corner_link catalogue">
Catalogue
</div>
<div class="corner_link instagram">
Instagram
</div>
<div class="accoutrements">
<svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
<title>Accoutrements</title>
<path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
<path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
<path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
<polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
<polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
<polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
<polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
<path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
<path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
<path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
<path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg>
<script>
var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
return Math.floor(Math.random() * 6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#" + r + g + b;
};
var color_1 = randomColor();
var color_2 = randomColor();
$(document).ready(function() {
color_change();
$('#accoutrements').click(function() {
color_change();
});
});
function color_change() {
color_1 = randomColor();
color_2 = randomColor();
$('.corner_link a').css('color', color_1);
$('.accoutrements').css('fill', color_1);
$('body').css('background', color_2);
$('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
}
</script>
</div>
</body>
</html>
CSS
body {
font-family: 'Work Sans', sans-serif;
font-size: 18px;
letter-spacing: 0px;
line-height: 27px;
font-weight: 400;
color: #111;
background-color: #fff;
}
.about {
position: fixed;
right: 40px;
bottom: 40px;
}
.shop {
position: fixed;
right: 40px;
top: 40px;
}
.catalogue {
position: fixed;
left: 40px;
top: 40px;
}
.instagram {
position: fixed;
left: 40px;
bottom: 40px;
}
a img {
text-decoration: none;
border:none;
border-bottom-style: none;
}
a:link {
text-decoration: none;
color: #111;
}
a:visited {
text-decoration: none;
color: #111;
}
a:hover {
background-color: #111;
color: #fff;
text-decoration: none;
}
a:active {
text-decoration: none;
color: #111;
}
.accoutrements {
top: 50%;
margin-top: 50vh;
transform: translateY(-50%);
cursor: pointer;
}
svg.logo {
position: relative;
max-width: 80%;
left: 10%;
}
svg.logo:emptyc {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#media screen and (min-width: 1000px) {
svg.logo {
max-width: 800px;
position: inherit;
display: block;
margin: auto;
}
}
.text {
top: 50%;
margin-top: 50vh;
transform: translateY(-50%);
margin-left: 20px;
margin-right: 20px;
}
To fix the black box remove the following code in your css
a:hover {
background-color: #111;
color: #fff;
text-decoration: none;
}
Alignment issue looks fine to me on all devices. Tested.
To fix the coloring issue, no need to have separate pages. You can execute your script once the page loads. Suppose you want to color page after 5 seconds so your code will look like:
$(document).ready(function() {
setTimeout(function(){
// Your color logic
}, 5000);
});
So put this script in your index page only:
$(document).ready(function() {
setTimeout(function(){
var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
return Math.floor(Math.random() * 6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#" + r + g + b;
};
var color_1 = randomColor();
var color_2 = randomColor();
$(document).ready(function() {
color_change();
$('#accoutrements').click(function() {
color_change();
});
});
function color_change() {
color_1 = randomColor();
color_2 = randomColor();
$('.corner_link a').css('color', color_1);
$('.accoutrements').css('fill', color_1);
$('body').css('background', color_2);
$('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
}
}, 5000);
});
Related
changing color of img except black pixels with javascript
So here is my problem:
I have black and white images (img tags), and i want to change the color of it except for the black pixels. I used a code that allowed me to do this, but when coloring the image, some of the black pixels are colored too, not only the white as you can see in these images (some of the black lines are colored):
This is my code (to test it please change the image url to a local image so the color changing works)
let hex
var mug=document.getElementById("eyes");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var originalPixels = null;
var currentPixels = null;
let currentcolor
function color(elem) {
hex='rgb(0,0,0)'
if (elem.classList[0].toString()=='color') {
currentcolor=document.getElementById(elem.id).style.backgroundColor
hex=currentcolor.toString()
}
}
function color1(elem) {
document.getElementById(elem.id).style.fill=currentcolor
getPixels(mug)
hex=hex.substring(4, hex.length-1)
.replace(/ /g, '')
.split(',')
changeColor(hex[0],hex[1],hex[2])
}
function getPixels(img)
{
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
originalPixels = ctx.getImageData(0, 0, img.width, img.height);
currentPixels = ctx.getImageData(0, 0, img.width, img.height);
img.onload = null;
}
function hexToRGB(hex)
{
console.log(hex)
var long = parseInt(hex.replace(/^#/, ""), 16);
return {
R: (long >>> 16) & 0xff,
G: (long >>> 8) & 0xff,
B: long & 0xff
};
}
function changeColor(a,b,c)
{
if(!originalPixels) return; // Check if image has loaded
var newColor = {R: eval(a), G: eval(b), B: eval(c)};
for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
{
if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
{
console.log(currentPixels.data[I + 3])
if ((currentPixels.data[I]!=0 && currentPixels.data[I+1]!=0 && currentPixels.data[I+2]!=0)) {
currentPixels.data[I] = newColor.R;
currentPixels.data[I + 1] = newColor.G;
currentPixels.data[I + 2] = newColor.B;
}
}
}
console.log(newColor)
ctx.putImageData(currentPixels, 0, 0);
mug.src = canvas.toDataURL("image/png");
}
#boite {
width: 70%;
height: 85%;
border: 5px solid black;
background-color: #e3e2d3;
position: absolute;
left: 0;
right: 0;
top: 5%;
justify-content: center;
display: flex;
align-items: center;
margin-left: 285px;
}
#corps{
width: 300px;
}
#next2{
position: absolute;
width: 25%;
height: 95%;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 20px;
border: 3px solid white;
margin-left: 15px;
margin-top: 15px;
text-align: center;
background-color: #B393DE;
}
#colours {
color: #fff;
justify-content: center;
font: 100 24px/100px sans-serif;
height: 150px;
width: 100%;
text-align: center;
display: flex;
flex-wrap: wrap;
}
#colours div {
height: 50%;
width: 30%;
border: 2px solid rgb(255, 255, 255);
border-radius: 50%;
cursor:pointer;
}
.color{
background-color: #888888;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Document</title>
</head>
<body>
<div id="next2" >
<div id="colours">
<div id="red" class="color" style="background-color: #FE2712;" onclick="color(this)"></div>
<div id="red-orange" class="color" style="background-color:#FD5206;" onclick="color(this)"></div>
<div id="orange" class="color" style="background-color: #FB9902;" onclick="color(this)"></div>
<div id="yellow-orange" class="color" style="background-color: #F9BC02;" onclick="color(this)"></div>
<div id="yellow" class="color" style="background-color: #FFFE34;" onclick="color(this)"></div>
<div id="yellow-green" class="color" style="background-color: #D1EA2C;" onclick="color(this)"></div>
<div id="green" class="color" style="background-color: #66B033;" onclick="color(this)"></div>
<div id="blue-green" class="color" style="background-color: #038FCB;" onclick="color(this)"></div>
<div id="blue" class="color" style="background-color: #0247FE;" onclick="color(this)"></div>
<div id="blue-violet" class="color" style="background-color: #3E01A4;" onclick="color(this)"></div>
<div id="violet" class="color" style="background-color: #8601B0;" onclick="color(this)"></div>
<div id="red-violet" class="color" style="background-color: #A9174B;" onclick="color(this)"></div>
<div id="black" class="color" style="background-color: #000000;" onclick="color(this)"></div>
<div id="white" class="color" style="background-color: #ffffff;" onclick="color(this)"></div>
</div>
</div>
<div id="boite">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1876.000000 2501.000000"
preserveAspectRatio="xMidYMid meet" id="corps" width="80%" height="80%">
<g transform="translate(0.000000,2501.000000) scale(0.100000,-0.100000)"
fill="white" stroke="none" id="issasvg" onclick="color1(this)" >
<path d="M8615 24873 c-386 -22 -661 -48 -938 -88 -960 -140 -1780 -418 -2486
-844 -317 -192 -473 -310 -721 -546 -164 -157 -264 -231 -362 -267 -44 -16
-62 -28 -69 -46 -13 -34 6 -80 36 -88 12 -3 99 17 198 45 97 28 179 51 183 51
5 0 -50 -39 -121 -86 -602 -401 -1138 -934 -1593 -1586 -602 -861 -1038 -1873
-1357 -3148 -106 -420 -113 -462 -145 -834 -70 -801 -109 -1055 -242 -1591
-139 -561 -163 -730 -163 -1145 0 -197 4 -325 13 -385 23 -153 62 -325 99
-435 39 -119 144 -344 175 -377 22 -24 62 -30 88 -13 8 5 49 112 91 237 l76
228 8 -50 c59 -407 298 -971 616 -1453 87 -132 132 -179 182 -193 95 -25 146
38 175 217 9 57 20 104 24 104 4 0 8 -5 8 -10 0 -6 25 -67 56 -137 146 -331
327 -595 579 -848 226 -227 390 -356 697 -547 l178 -110 -46 -57 c-935 -1156
-1523 -2549 -1683 -3986 -37 -329 -45 -485 -45 -865 0 -388 13 -603 55 -945
106 -867 372 -1742 769 -2534 67 -134 80 -151 119 -151 53 0 61 23 61 166 0
71 3 152 6 181 l7 52 76 -112 c339 -495 585 -798 841 -1035 538 -498 1161
-855 1925 -1105 779 -254 1708 -374 2624 -338 331 13 498 26 896 71 149 16
275 30 280 30 16 -1 -64 -41 -140 -71 -81 -31 -104 -59 -83 -103 6 -15 23 -30
37 -34 42 -12 555 -7 696 7 575 55 1056 184 1816 487 773 307 1301 585 1764
929 441 326 806 720 1058 1139 60 100 77 122 82 106 3 -11 8 -105 9 -208 2
-104 6 -195 11 -201 12 -20 53 -31 79 -21 41 15 261 480 408 865 693 1807 684
3785 -27 5580 -301 759 -688 1413 -1243 2096 l-23 28 101 76 c213 161 427 344
750 641 369 338 548 553 690 825 l57 111 17 -109 c9 -59 22 -125 28 -145 25
-85 119 -123 188 -76 95 64 374 521 518 848 116 261 219 591 238 761 4 33 10
57 14 52 4 -4 40 -106 80 -226 61 -186 76 -220 96 -229 53 -25 73 -5 155 157
316 626 333 1410 49 2340 -29 94 -70 229 -92 300 -37 122 -514 1993 -592 2320
-57 240 -100 447 -170 813 -108 559 -164 803 -256 1107 -223 739 -541 1319
-968 1766 -59 62 -102 110 -97 107 20 -11 461 -148 478 -148 25 0 57 36 57 66
0 15 -12 37 -32 56 -53 49 -204 159 -328 238 -150 95 -268 183 -465 344 -631
517 -1140 856 -1725 1150 -1004 506 -2012 758 -3295 826 -167 9 -976 11 -1110
3z"/>
</g>
</svg>
<img id="eyes" width="80px" height="40px" src="https://png.pngitem.com/pimgs/s/35-355887_eyes-eye-black-and-white-clip-art-cartoon.png" id="eye1-boite0" class="eye1-boite0 remove" style="position: absolute; width:150px; height:auto" onclick="color1(this)">
</div>
</body>
</html>
Thanks for your help!
SVG images formatting issues in CSS
I'm trying to achieve a similar effect to Lando Norris' website where his achievements scroll horizontally. I tried recreating that by creating svg images and then formatting them with the help of css. It doesn't seem to work on most web browsers though. Should I change my approach at recreating this horizontal banner or is there a way to make the images display properly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PawelosFPV achievements</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|PT+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
position: relative;
}
:root {
font-family: "PT Sans", sans-serif;
font-size: 20px;
}
body {
background-color: #EFF1ED;
min-height: 100vh;
}
h1 {
color: #161032;
font-family: "Baloo Tamma", sans-serif;
font-size: 1.5rem;
}
h1::after {
background-color: #00A8E8;
bottom: 0;
content: "";
display: block;
height: 0.25rem;
position: absolute;
width: 1rem;
}
p {
color: rgba(0, 0, 0, 0.8);
}
.container {
margin: 0 auto 2rem;
max-width: 900px;
padding: 0 1.5rem;
}
.sample-item {
width: auto;
height: 125px;
vertical-align: middle;
padding-right: 20px;
}
.horizontal-scrolling-banner {
overflow: hidden;
}
.horizontal-scrolling-banner__helper-wrapper {
align-items: center;
display: flex;
left: 0;
transform: translateZ(0);
transition-property: left;
transition-timing-function: linear;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
</div>
<div class="horizontal-scrolling-banner">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Riga-2018.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Modena-2018.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Sumo-Challange-2018.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Junior-Championship-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Championship-2019-V2.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Salina-Turda-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-VADUZ-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-TURIN-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/VICE-FAI-World-Cup-Ranking-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Laax-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/IDSC-Korea-Yeongwol.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/EPFL-FAI-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/XFLY-Tianjin-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Partouche-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2020.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2020.svg" class="sample-item">
</div>
</div>
<!-- partial -->
<script>
(function horizontalScrollingBanner() {
var banners = document.getElementsByClassName('horizontal-scrolling-banner');
if (!banners || banners.length === 0) {
return;
}
var pxPerSecond = 25;
setUpElements();
scrollTheBanners();
window.addEventListener('resize', setUpElements);
function setUpElements() {
for (var i = 0; i < banners.length; i++) {
var currentBanner = banners[i];
var helperWrapperClass = 'horizontal-scrolling-banner__helper-wrapper';
var currentHelperWrapper = currentBanner.querySelector('.' + helperWrapperClass);
if (currentHelperWrapper) {
var clones = currentHelperWrapper.querySelectorAll('[data-clone]');
Array.prototype.forEach.call(clones, function(clone) {
clone.remove();
});
var childrenCount = currentHelperWrapper.children.length;
for (var i = 0; i < childrenCount; i++) {
currentBanner.appendChild(currentHelperWrapper.children[0]);
}
currentHelperWrapper.remove();
}
var children = currentBanner.children;
var bannerWidth = currentBanner.getBoundingClientRect().width;
var minWidthToCoverBanner = (bannerWidth * 2) + children[0].getBoundingClientRect().width;
var childrenWidth = Array.prototype.reduce.call(children, function(r, child) {
return r + child.getBoundingClientRect().width;
}, 0);
var currentWidth = childrenWidth;
do {
Array.prototype.forEach.call(children, function(child) {
var clone = child.cloneNode();
clone.setAttribute('aria-hidden', true);
clone.dataset.clone = true;
currentBanner.appendChild(clone);
});
currentWidth += childrenWidth;
} while (currentWidth < minWidthToCoverBanner);
var transitionHelperWrapper = document.createElement('div');
transitionHelperWrapper.classList.add('horizontal-scrolling-banner__helper-wrapper');
var childrenCount = children.length;
for (var i = 0; i < childrenCount; i++) {
transitionHelperWrapper.appendChild(children[0]);
}
currentBanner.appendChild(transitionHelperWrapper);
transitionHelperWrapper.dataset.childrenWidth = childrenWidth;
}
}
function scrollTheBanners() {
for (var i = 0; i < banners.length; i++) {
var helperWrapper = banners[i].firstElementChild;
var childrenWidth = helperWrapper.dataset.childrenWidth;
var offsetLeft = helperWrapper.offsetLeft;
if (offsetLeft <= (childrenWidth * -1)) {
helperWrapper.style.transitionDuration = '0s';
helperWrapper.style.left = '0px';
helperWrapper.style.removeProperty('transition-duration');
} else if (helperWrapper.style.left === '' || helperWrapper.style.left === '0px') {
setTimeout(function() {
helperWrapper.style.transitionDuration = (childrenWidth / pxPerSecond).toFixed() + 's';
helperWrapper.style.left = (childrenWidth * -1) + 'px';
}, 0);
}
}
requestAnimationFrame(scrollTheBanners);
}
})();
</script>
</body>
</html>
Fonts are are not automatically embedded
Locally installed fonts used in svg are not available for users of your website/app unless they happen to have this particular font installed.
Besides firefox usually rejects local font file usage due to security policies (could be changed in settings as described here: "Custom (System installed) fonts in Firefox?")
Some options:
Open your svg in Illustrator and convert text to (path) outlines before saving as svg via convert text to outlines selcting all elements by CTRLa and CTRLshiftO should do the trick
embed the font via #font-face using a data URL. A tool like transfonter can help
You should also concider using an open source alternative to your font like the SIL OFL v1.1 licensed "D-Din" available on font squirrel
Still weird letter spacing?
Illustrator often splits text elements into seperate <text>or <tspan> elements. This is usually caused by customized spacing/kerning values.
<text class="cls-1" transform="translate(133.05 117.67)">2018</text>
<text class="cls-2" transform="translate(143.07 61.95)">1<tspan class="cls-3" x="19.99" y="0">S</tspan>
<tspan x="39.83" y="0">T</tspan>
</text><text class="cls-4" transform="translate(57.23 179.3)">SUMO CHAL<tspan class="cls-5" x="147.92" y="0">L</tspan>
<tspan x="162.25" y="0">ANGE</tspan>
</text>
Unfortunately markup will only work for this particular font. So you might need to simplify your structure like so:
<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
AWARD
</text>
Example: embedded vs not embedded font
img,
svg{
height:200px
}
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#700" rel="stylesheet">
<p>Font embedded</p>
<img src="https://svgshare.com/i/iW8.svg" class="sample-item">
<p>Font not embedded (fallback font is used)</p>
<img src="https://svgshare.com/i/iY4.svg" class="sample-item">
<p>Inline SVG - using Webfont (Roboto)</p>
<svg id="Achievement" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 185">
<defs>
<style>
text {
font-family: 'Roboto Condensed', sans-serif;
font-size: 32px;
font-weight: bold;
}
</style>
</defs>
<path id="wreath" d="M2.4 88.7c0-0.3 8.9 0.8 20.8 12.8a58.6 58.6 0 0 1-4.3-8.9c-13.4-3.7-15.9-9.4-19-19.5c1.3 2.6 10.3 4.8 12.7 9c1.8 3.3 3.8 6.4 5.5 8a51.4 51.4 0 0 1-1.9-8.3c-0.1-0.5-0.1-0.9-0.2-1.3c-4.4-2.2-14.6-9.4-15.3-23.2c2 2.9 9.3 2.6 14.9 18.5a82.9 82.9 0 0 1 0.2-9.3c-4.3-3.5-12.5-13.9-11-35c1.7 3.3 10.4 14.3 10.8 21.9a60.7 60.7 0 0 0 0.8 7.3c0.1-0.6 0.1-1.1 0.2-1.7a67.3 67.3 0 0 1 1.6-8.2a26.1 26.1 0 0 0-4.7-10.9a9.8 9.8 0 0 1-1.1-11c1.2-2.6 0.6-8.5 0.6-8.5s8.2 8.2 6.1 27.4a61.7 61.7 0 0 1 2.7-6.9a15.3 15.3 0 0 0-1.3-8.7c-2.2-4.7-4.8-12 1.3-22.9c0.1 4.3 3.8 11.4 3.4 16.9a76.8 76.8 0 0 1-1.8 11.5a57.8 57.8 0 0 1 3.7-6c0.3-2.9-1.1-7-0.9-14.2c0.2-8.7 4-10.5 4.9-15.2c3.4 9 1.5 19.4-1.2 25.6l0.8-1c0.9-1.2 1.8-2.3 2.6-3.4a35.1 35.1 0 0 1 3.7-15.4c1.7-3 6.8-5.5 6.9-8c1.3 9.3-3.2 15.6-7.3 20.2l0 0.1a14.6 14.6 0 0 1 16-2.8s-5.3 4.9-9.7 5.3c-4.2 0.3-6.3 0-8.6 1.4c-0.7 1-1.6 2.1-2.5 3.2c5.7-3.1 14.2-0.1 17.5 2c-4.8 3.8-9.6 2.9-12.3 1.1c-2.4-1.6-5.2-0.1-6.9-0.9a70.2 70.2 0 0 0-4.4 6.3a61.2 61.2 0 0 0-3.7 7.8c3.1-4.4 8.5-9.7 15.3-9.9c-0.2 2.8-3.3 8.2-7.7 10.7c-3.6 2-7.3 2.9-9.4 4.7a65.1 65.1 0 0 0-2 10v0.1c4-10.1 15.2-14.7 18.2-14.9c0 0-5 3.6-5.3 8.3s-4.8 7.2-8.8 8.5a8.8 8.8 0 0 0-4.7 4.1a77.5 77.5 0 0 0 0 12.9c1.3-19.3 14.5-19.3 14.5-19.3a7.8 7.8 0 0 0-2.4 5c-0.4 3.4-1.2 6.1-5.3 10.6a21 21 0 0 0-5.5 11.3a54 54 0 0 0 5.8 13.9c-2.4-6-3.9-14.4-0.8-21.7c0.5 4.2 6.8 10.4 6.8 15.6c0 4.5-1.8 10.4-0.3 14.2c0.8 0.9 1.6 1.9 2.5 2.8c-0.4-2.7-0.1-6.7-0.7-9.5c1.5 2.2 2.4 8.2 3.4 12.3a71 71 0 0 0 6 5.1c-5.1-6-7.7-15.7-6.6-24.8c3.7 3.6 8.7 11.1 8.9 16.9a28.1 28.1 0 0 0 3.7 11.9l1.1 0.6c1.1 0.6 2.3 1.2 3.4 1.7c-5.6-5-7-14.1-7-18.1c6.3 4.4 13 14.6 13.8 20.6c1.2 0.3 2.4 0.6 3.6 0.9c4.8 0.9 10.2 1 14.5-1.3l0.3 0.5h0l0.3 0.5l0.5 1c-5.1 2.6-10.9 2.5-16 1.5a47.4 47.4 0 0 1-5.5-1.5c-2.3 3.8-8.5 7.2-12.4 6.8s-8.2-2.4-10.9-1.5c3.6-6 9.8-7.7 13.9-6.3c3.6 1.2 6.1 1.6 8 0.5a56.2 56.2 0 0 1-7.5-3.4l-1-0.5c-4.9 3-11.2 2.5-15.3 1.1c-4.6-1.5-6.3-6.1-10.1-8.1c9.6-2.5 14.8 0.9 17 3a9.8 9.8 0 0 0 6.5 2.9a66.4 66.4 0 0 1-10.3-7.9c-2.7-0.1-8.3 1.7-12.4-1.7c4-1.3 7.1-1.7 9.8-0.9c-0.9-0.9-1.7-1.8-2.5-2.8c-3.1 0.1-8.7 2-13-0.4a70.7 70.7 0 0 1-10.9-8.1s7.3-0.3 11.2 0.7c-3.6-2-14.3-13.4-14.3-13.7z" />
<use href="#wreath" style="transform: translate(100%,0) scale(-1, 1);" />
</use>
<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
AWARD
</text>
</svg>
Inline svg (appended to your html body) could use webfonts loaded via #font-face. Unfortunately your carousel script apparenty only support single elements (without nested child nodes).
Center navigation bar (Bootstrap) items horizontally
I have a navigation bar with 2 icons evenly distributed.
I am wanting to scale them horizontally so they are centered horizontally in relation to the navigation bar.
I think the viewbox of the svg's are cause it to not look visually centred.
I've tried playing with the size without much luck.
I did try justifying content which didn't work.
Then I tried adding padding to the icons to allow for them to move.
Code:
.bar {
display: flex;
justify-content: center;
}
/* Style the navigation menu */
.navbar {
width: 90%;
background: #3CE18F;
/* Forces the icons to not go outside the scrollbar. If we left it to invisble it would display
them outside. */
overflow: auto;
/* Curves the corners of the Nav Bar. */
border-radius: 10px 10px 30px 30px;
position: fixed;
bottom: 3%;
display: block;
margin:auto;
}
/* Navigation links */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 48.6%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
/* Add a background color on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #4CAF50;
}
.microphoneIcon {
/* position: absolute;
left: 65.36%;
right: 26.29%;
top: 54.22%;
bottom: 0.46%;*/
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
/* Similar syntax to box-shadow */
/*background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}
.cameraIcon {
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#009578">
<title>PWA</title>
<link rel="stylesheet" href="src/navigationBar.css">
<!-- Javascript Docs -->
<script type="text/javascript" src="src/index.js"></script>
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="images/logo192.png">
</head>
<body>
<!-- Class for the Bottom Navigation Bar -->
<div class="bar">
<nav class="navbar fixed-bottom navbar-light bg-light nav-fill">
<a href="#">
<svg class='microphoneIcon' id='microphoneIcon' width="42" height="46" viewBox="0 0 42 46" stroke="grey">
<path d='M21 23.7571C25.0314 23.7571 28.2857 21.1043 28.2857 17.8179V5.93928C28.2857 2.65288 25.0314 0 21 0C16.9686 0 13.7143 2.65288 13.7143 5.93928V17.8179C13.7143 21.1043 16.9686 23.7571 21 23.7571ZM18.5714 5.93929C18.5714 4.85043 19.6643 3.95953 21 3.95953C22.3357 3.95953 23.4286 4.85043 23.4286 5.93929V17.8179C23.4286 18.9067 22.3357 19.7976 21 19.7976C19.6643 19.7976 18.5714 18.9067 18.5714 17.8179V5.93929ZM21 27.7167C27.7029 27.7167 33.1429 23.282 33.1429 17.8179H38C38 24.8064 31.6614 30.5477 23.4286 31.5178V37.6155H18.5714V31.5178C10.3386 30.5477 4 24.8064 4 17.8179H8.85714C8.85714 23.282 14.2971 27.7167 21 27.7167Z'/>
</svg>
</a>
<a href="#">
<svg class ='cameraIcon' id='cameraIcon' xmlns="http://www.w3.org/2000/svg" width="50" height="46" viewBox="0 0 50 46">
<path d="M 45 36 a 3 3 90 0 1 -3 3 H 6 a 3 3 90 0 1 -3 -3 V 18 a 3 3 90 0 1 3 -3 h 3.516 a 9 9 90 0 0 6.36 -2.637 l 2.49 -2.484 A 3 3 90 0 1 20.481 9 h 7.032 a 3 3 90 0 1 2.121 0.879 l 2.484 2.484 A 9 9 90 0 0 38.484 15 H 42 a 3 3 90 0 1 3 3 v 18 z M 6 12 a 6 6 90 0 0 -6 6 v 18 a 6 6 90 0 0 6 6 h 36 a 6 6 90 0 0 6 -6 V 18 a 6 6 90 0 0 -6 -6 h -3.516 a 6 6 90 0 1 -4.242 -1.758 l -2.484 -2.484 A 6 6 90 0 0 27.516 6 H 20.484 a 6 6 90 0 0 -4.242 1.758 l -2.484 2.484 A 6 6 90 0 1 9.516 12 H 6 z M 24 33 a 7.5 7.5 90 1 1 0 -15 a 7.5 7.5 90 0 1 0 15 z m 0 3 a 10.5 10.5 90 1 0 0 -21 a 10.5 10.5 90 0 0 0 21 z M 9 19.5 a 1.5 1.5 90 1 1 -3 0 a 1.5 1.5 90 0 1 3 0 z"/>
</svg>
</a>
</nav>
</div>
</body>
</html>
Here is a simple way to scale them horizontally. The display of the navbar must be inline-flex. I have added it.
As you have requested to scale them vertically. I have changed the CSS of a tag width.
Please take a look at the CSS. #Nitrogen
.bar {
display: flex;
justify-content: center;
}
/* Style the navigation menu */
.navbar {
width: 90%;
background: #3CE18F;
/* Forces the icons to not go outside the scrollbar. If we left it to invisble it would display
them outside. */
overflow: auto;
/* Curves the corners of the Nav Bar. */
border-radius: 10px 10px 30px 30px;
position: fixed;
bottom: 3%;
display: block;
margin:auto;
}
/* Navigation links */
.navbar a {
width: 100% !important;
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 48.6%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
/* Add a background color on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #4CAF50;
}
.microphoneIcon {
/* position: absolute;
left: 65.36%;
right: 26.29%;
top: 54.22%;
bottom: 0.46%;*/
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
/* Similar syntax to box-shadow */
/*background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}
.cameraIcon {
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#009578">
<title>PWA</title>
<link rel="stylesheet" href="src/navigationBar.css">
<!-- Javascript Docs -->
<script type="text/javascript" src="src/index.js"></script>
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="images/logo192.png">
</head>
<body>
<!-- Class for the Bottom Navigation Bar -->
<div class="bar">
<nav class="navbar fixed-bottom navbar-light bg-light nav-fill">
<a href="#">
<svg class='microphoneIcon' id='microphoneIcon' width="42" height="46" viewBox="0 0 42 46" stroke="grey">
<path d='M21 23.7571C25.0314 23.7571 28.2857 21.1043 28.2857 17.8179V5.93928C28.2857 2.65288 25.0314 0 21 0C16.9686 0 13.7143 2.65288 13.7143 5.93928V17.8179C13.7143 21.1043 16.9686 23.7571 21 23.7571ZM18.5714 5.93929C18.5714 4.85043 19.6643 3.95953 21 3.95953C22.3357 3.95953 23.4286 4.85043 23.4286 5.93929V17.8179C23.4286 18.9067 22.3357 19.7976 21 19.7976C19.6643 19.7976 18.5714 18.9067 18.5714 17.8179V5.93929ZM21 27.7167C27.7029 27.7167 33.1429 23.282 33.1429 17.8179H38C38 24.8064 31.6614 30.5477 23.4286 31.5178V37.6155H18.5714V31.5178C10.3386 30.5477 4 24.8064 4 17.8179H8.85714C8.85714 23.282 14.2971 27.7167 21 27.7167Z'/>
</svg>
</a>
<a href="#">
<svg class ='cameraIcon' id='cameraIcon' xmlns="http://www.w3.org/2000/svg" width="50" height="46" viewBox="0 0 50 46">
<path d="M 45 36 a 3 3 90 0 1 -3 3 H 6 a 3 3 90 0 1 -3 -3 V 18 a 3 3 90 0 1 3 -3 h 3.516 a 9 9 90 0 0 6.36 -2.637 l 2.49 -2.484 A 3 3 90 0 1 20.481 9 h 7.032 a 3 3 90 0 1 2.121 0.879 l 2.484 2.484 A 9 9 90 0 0 38.484 15 H 42 a 3 3 90 0 1 3 3 v 18 z M 6 12 a 6 6 90 0 0 -6 6 v 18 a 6 6 90 0 0 6 6 h 36 a 6 6 90 0 0 6 -6 V 18 a 6 6 90 0 0 -6 -6 h -3.516 a 6 6 90 0 1 -4.242 -1.758 l -2.484 -2.484 A 6 6 90 0 0 27.516 6 H 20.484 a 6 6 90 0 0 -4.242 1.758 l -2.484 2.484 A 6 6 90 0 1 9.516 12 H 6 z M 24 33 a 7.5 7.5 90 1 1 0 -15 a 7.5 7.5 90 0 1 0 15 z m 0 3 a 10.5 10.5 90 1 0 0 -21 a 10.5 10.5 90 0 0 0 21 z M 9 19.5 a 1.5 1.5 90 1 1 -3 0 a 1.5 1.5 90 0 1 3 0 z"/>
</svg>
</a>
</nav>
</div>
</body>
</html>
put display:flex in to navbar div
.navbar {
display:flex;
}
button in separate lines
.navbar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
How to do a vertical wave animation of a ribbon in svg?
My question is that I want to create a svg file (Code is mentioned below) like a vertical ribbon(which is already done), now I want to give a wave effect that will start from the top to the bottom and will be in continuous mode. But it isn't working.
#keyframes thread{
from {
stroke-dashoffset: 200;
opacity:.5;
}
to{
stroke-dashoffset: 2;
opacity:1;
}
}
.anime{
stroke-dasharray: 200;
animation: thread 2s .4s forwards infinite ease-in-out;
}
<div class="position-absolute">
<svg height="200" width="200" >
<g class="anime">
<path id="shape-1" d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60 h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
fill="transparent" stroke="black" stroke-width="2"></path>
<path id="shape-2" d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
fill="transparent" stroke="black" stroke-width="2">
</path>
</g>
</svg>
</div>
I think you're looking for something like this(correct me if I'm wrong):
var svg = document.getElementById("cups");
var s = Snap(svg);
var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');
var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');
var toRibbon2 = function(){
ribbon1.animate({ d: ribbon2Points }, 1000, toRibbon1);
}
var toRibbon1 = function(){
ribbon1.animate({ d: ribbon1Points }, 1000, toRibbon2);
}
toRibbon1();
h1 {
text-align: center;
}
svg {
display: block;
margin: 0 auto;
}
#ribbon2 {
opacity: 0;
}
svg {
fill: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg width="100" height="130" viewBox="0 0 75 47" xmlns="http://www.w3.org/2000/svg">
<path id="ribbon1" class="cls-1" d="M64.5,64.5c0,15-4,19-4,31a17.23,17.23,0,0,0,10,16h28s-11-8-11-17,1-16,1-30-1-25-1-25h-26S64.5,49.5,64.5,64.5Z" transform="translate(-58.85 -39)"/>
<path id="ribbon2" class="cls-1" d="M61,60c0,15,5.5,23.5,5.5,35.5s-6,16-6,16h28s5-4,5-13S85,76,85,62s2.5-22.5,2.5-22.5h-26S61,45,61,60Z" transform="translate(-58.85 -39)"/>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>
</html>
it probably requires some tweaking in the paths itself to make for a more realistic effect. Here it is specifically applied to your paths:
var svg = document.getElementById("cups");
var s = Snap(svg);
var ribbon1 = Snap.select('#ribbon1');
var ribbon2 = Snap.select('#ribbon2');
var ribbon1Points = ribbon1.node.getAttribute('d');
var ribbon2Points = ribbon2.node.getAttribute('d');
var toRibbon2 = function() {
ribbon1.animate({
d: ribbon2Points
}, 1000, toRibbon1);
}
var toRibbon1 = function() {
ribbon1.animate({
d: ribbon1Points
}, 1000, toRibbon2);
}
toRibbon1();
h1 {
text-align: center;
}
svg {
display: block;
margin: 0 auto;
}
#ribbon2 {
opacity: 0;
}
svg {
fill: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg height="200" width="200">
<g class="anime">
<path id="ribbon1" d="M100 0 c-20 20 -20 25 -10 40 s20 30 -2 60 h50 m11.5 -100 c-20 20 -20 25 -10 40 s20 30 -2 60"
fill="transparent" stroke="black" stroke-width="2"></path>
<path id="ribbon2" d="M100 0 c-25 25 -25 30 -15 40 s25 35 -9 55 h64 m16.5 -105 c-25 25 -25 30 -15 45 s25 35 -4 60"
fill="transparent" stroke="black" stroke-width="2">
</path>
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</body>
</html>
Here's an extensive guide on how to make this (which I based my answer on). It's basically two SVG paths that morph into each other over time.
Mobile compatabile website, not going.. Mobile width....?
I'm trying to get mobile comparability to work on my website and all my container <div>'s have a max-width: 1000px; and a width:100%; so my website should be able to reach 1000px, then have that <div> go 100%, but that's not happening. Well on a computer it is, but on mobile the website is showing up as 1000px wide so I'm terribly confused.
Here's a link, hopefully you guys have an idea.
I'll post all my code here, just because I think I have to..
HTML
<html>
<head>
<link href="css/reset.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="section1">
<div id="section1content">
<div id="logoimg">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300" height="300" viewBox="0 0 1898.000000 1898.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Darryl Huffman's logo
</metadata>
<g id="ttt" transform="translate(0.000000,1898.000000) scale(0.100000,-0.100000)"
stroke="none">
<path d="M9120 18974 c-529 -29 -891 -69 -1315 -145 -2509 -455 -4719 -1889
-6156 -3994 -886 -1299 -1437 -2805 -1598 -4375 -39 -372 -45 -519 -45 -970 0
-451 6 -598 45 -970 135 -1319 547 -2601 1204 -3745 718 -1252 1699 -2313
2890 -3126 967 -660 2065 -1141 3203 -1403 494 -114 929 -180 1462 -223 303
-24 1057 -24 1360 0 533 43 968 109 1462 223 2169 500 4108 1762 5445 3545
1040 1387 1675 3010 1852 4729 39 372 45 519 45 970 0 451 -6 598 -45 970
-161 1570 -712 3076 -1598 4375 -813 1190 -1875 2173 -3125 2890 -1228 704
-2583 1118 -4026 1231 -182 14 -907 26 -1060 18z m1180 -307 c365 -39 851
-113 1105 -168 349 -76 832 -204 925 -246 25 -11 90 -35 145 -53 198 -65 572
-210 800 -311 209 -92 901 -455 975 -511 14 -11 129 -85 255 -166 297 -191
329 -213 601 -424 280 -216 293 -227 496 -408 203 -181 417 -389 607 -591 154
-164 458 -515 501 -577 14 -21 89 -121 167 -223 133 -174 396 -561 458 -674
16 -27 47 -79 70 -115 122 -190 409 -745 527 -1019 70 -164 208 -525 253 -661
21 -63 50 -146 66 -185 35 -86 139 -451 180 -629 16 -72 43 -191 60 -263 36
-160 90 -473 123 -718 66 -476 76 -646 76 -1235 0 -589 -10 -759 -76 -1235
-33 -245 -87 -558 -123 -718 -17 -72 -44 -191 -60 -263 -41 -178 -145 -543
-180 -629 -16 -38 -45 -122 -66 -185 -45 -136 -183 -497 -253 -661 -118 -274
-405 -829 -527 -1019 -23 -36 -54 -87 -70 -115 -62 -113 -325 -500 -458 -674
-78 -102 -153 -202 -167 -223 -43 -62 -347 -413 -501 -577 -190 -202 -404
-410 -607 -591 -203 -181 -216 -192 -496 -408 -272 -211 -304 -233 -601 -424
-126 -81 -241 -155 -255 -166 -74 -56 -766 -419 -975 -511 -228 -101 -602
-246 -800 -311 -55 -18 -120 -42 -145 -53 -93 -42 -576 -170 -925 -246 -262
-57 -754 -131 -1115 -168 -258 -27 -1342 -27 -1600 0 -361 37 -853 111 -1115
168 -349 76 -832 204 -925 246 -25 11 -90 35 -145 53 -198 65 -572 210 -800
311 -209 92 -901 455 -975 511 -14 11 -128 85 -255 166 -297 191 -329 213
-601 424 -280 216 -293 227 -496 408 -203 181 -417 389 -607 591 -154 164
-458 515 -501 577 -14 21 -89 121 -167 223 -133 174 -396 561 -458 674 -16 28
-47 79 -70 115 -122 190 -409 745 -527 1019 -70 164 -208 525 -253 661 -21 63
-50 147 -66 185 -35 86 -139 451 -180 629 -16 72 -43 191 -60 263 -73 326
-151 863 -184 1266 -21 262 -21 1112 0 1374 33 403 111 940 184 1266 17 72 44
191 60 263 41 178 145 543 180 629 16 39 45 122 66 185 45 136 183 497 253
661 118 274 405 829 527 1019 23 36 54 88 70 115 62 113 325 500 458 674 78
102 153 202 167 223 43 62 347 413 501 577 190 202 404 410 607 591 203 181
216 192 496 408 272 211 304 233 601 424 127 81 241 155 255 166 74 56 766
419 975 511 228 101 602 246 800 311 55 18 120 42 145 53 93 42 576 170 925
246 275 59 794 137 1110 165 94 9 188 17 210 20 22 2 312 2 645 1 481 -2 637
-5 760 -18z"/>
<path d="M9045 18469 c-2011 -103 -3912 -866 -5437 -2181 -890 -768 -1628
-1718 -2161 -2785 -620 -1239 -947 -2624 -947 -4013 0 -2161 782 -4256 2199
-5890 776 -895 1712 -1620 2778 -2153 1480 -741 3152 -1058 4803 -911 1886
167 3655 917 5092 2156 890 768 1628 1718 2161 2785 1008 2013 1220 4348 592
6513 -484 1667 -1447 3171 -2753 4298 -987 852 -2136 1475 -3382 1837 -945
274 -1973 394 -2945 344z m-2134 -4989 c767 -59 1441 -277 2034 -658 232 -149
400 -285 611 -496 401 -401 680 -842 878 -1389 80 -221 161 -540 191 -749 l6
-48 1530 0 1529 0 0 1675 0 1675 935 0 935 0 0 -4005 0 -4005 -935 0 -935 0 0
1695 0 1695 -1527 -2 -1526 -3 -23 -140 c-110 -660 -389 -1285 -808 -1809
-114 -143 -398 -425 -549 -545 -590 -467 -1313 -760 -2117 -855 -273 -33 -452
-36 -2092 -36 l-1648 0 0 4005 0 4005 1688 0 c1068 0 1737 -4 1823 -10z m3729
-1367 c0 -757 -2 -1374 -4 -1372 -2 2 -18 54 -35 114 -71 241 -214 573 -350
810 -86 148 -221 346 -327 480 -121 151 -402 431 -557 554 -147 116 -379 273
-515 346 l-92 50 0 198 0 197 940 0 940 0 0 -1377z m0 -5253 l0 -1380 -940 0
-940 0 0 199 c0 190 1 200 20 206 33 11 299 174 404 248 330 234 638 543 882
883 138 194 299 486 398 724 53 126 166 454 166 483 0 9 2 17 5 17 3 0 5 -621
5 -1380z"/>
<path d="M5280 9485 l0 -2576 753 4 c800 4 822 5 1062 57 405 88 800 313 1056
603 326 369 514 821 596 1434 22 167 21 770 -3 963 -87 731 -385 1314 -849
1666 -266 202 -551 323 -920 391 l-140 26 -777 4 -778 4 0 -2576z"/>
</g>
</svg>
</div>
</div>
</div>
<div id="topspace"></div>
<div id="polygons">
<div id="poly1" class="poly"></div>
<div id="poly2" class="poly"></div>
<div id="poly3" class="poly"></div>
<div id="poly4" class="poly"></div>
<div id="poly5" class="poly"></div>
<div id="poly6" class="poly"></div>
<div id="poly7" class="poly"></div>
<div id="poly8" class="poly"></div>
<div id="poly9" class="poly"></div>
<div id="poly10" class="poly"></div>
<div id="poly11" class="poly"></div>
<div id="poly12" class="poly"></div>
<div id="poly13" class="poly"></div>
<div id="poly14" class="poly"></div>
<div id="poly15" class="poly"></div>
<div id="poly16" class="poly"></div>
<div id="poly17" class="poly"></div>
<div id="poly18" class="poly"></div>
<div id="poly19" class="poly"></div>
<div id="poly20" class="poly"></div>
<div id="poly21" class="poly"></div>
<div id="poly22" class="poly"></div>
<div id="poly23" class="poly"></div>
<div id="poly24" class="poly"></div>
<div id="poly25" class="poly"></div>
<div id="poly26" class="poly"></div>
<div id="poly27" class="poly"></div>
<div id="poly28" class="poly"></div>
<div id="poly29" class="poly"></div>
<div id="poly30" class="poly"></div>
</div>
<div class="section" id="section2">
<div class="wrapper">
<h1>ABOUT ME</h1>
<h2>Just a little bit</h2>
<br>
<p>I'm Darryl Huffman!
I am a self taught web designer and developer who's 16.<br>
<br>
What am I doing?   Well, if you don't see me glued to my laptop, I'm probably slaying an ender dragon.   Or quite possibly, I have gone and discovered a way to travel through time and I am probably being chased by a T-Rex.
<br>
<br>
However, when I'm not playing around with my time machine, I spend my time designing and developing with the hope to simplify and brighten our everyday lives.</p>
<div class="wrapper2">
<p>
I like to make websites more than just websites. <br>
I like to make websites, <span id="quoteart">Art</span>.
</p>
</div>
</div>
</div>
<div class="section">
<div class="wrapper">
<h1>WORKS</h1>
<h2>As in things I've worked on</h2>
<br>
<div style="text-align: center;">
<img src="images/portfolio/gravitychimp.png" width="200" class="workimg" id="gravchimp">
<img src="images/portfolio/hmf.png" width="200" class="workimg" id="hmf">
<img src="images/portfolio/sotare.png" width="200" class="workimg" id="sotare">
<img src="images/portfolio/trisearching.png" width="200" class="workimg" id="trisearch">
</div>
<h3 id="work_label"></h3><img id="close_work" src="images/svg/x.svg" style="float:right; width:50px; cursor:pointer;">
<br>
<p id="work_text">
</p>
</div>
</div>
<div class="section" >
<div class="wrapper">
<div class="wrapper" style="border-bottom:none; padding-bottom:0px;">
<h1>CONTACT</h1>
<h2>As in things I've worked on</h2>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js" type="text/javascript"></script>
<script src="js/plax.js" type="text/javascript"></script>
</body>
</html>
CSS
::-moz-selection { /* Code for Firefox */
color: #fff;
background: #000;
}
#font-face {
font-family: 'allura';
src: url('fonts/Allura.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
cursor: url(images/cursor/Normal%20Select.cur), auto;
transition: background .5s;
background-color: #fff;
}
p{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h1{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h2{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h3{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
::-webkit-scrollbar{width: 5px;}
::-webkit-scrollbar-thumb {background-color:#000000;}
::-webkit-scrollbar-track {background-color:#FFFFFF;}
/* END CSS Code for Scrollbar END */
::selection {
color: #fff;
background: #000;
}
.poly {
background-image: url(images/svg/poly.svg);
background-size: contain;
background-repeat: no-repeat;
height:200px;
width:100px;
position: absolute;
}
#section1content {
position: absolute;
top:30%;
width:100%;
text-align: center;
transition: all 1s;
}
#section1 {
width:100%;
height:100%;
position: fixed;
z-index: 1;
transition: all 1s;
}
.section {
width:100%;
position: relative;
z-index: 2;
background-color: #fff;
font-family: 'Raleway', sans-serif;
}
#polygons {
height:100%;
width: 100%;
position: fixed;;
z-index: 0;
top:0px;
-webkit-animation: polyfade .5s; /* Chrome, Safari, Opera */
animation: polyfade .5s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes polyfade {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* Standard syntax */
#keyframes polyfade {
0% {opacity: 0;}
100% {opacity: 1;}
}
body {
overflow-x: hidden;
}
#logoimg {
-webkit-animation: logoimg 1s; /* Chrome, Safari, Opera */
animation: logoimg 1s;
width:298px;
height:295px;
margin-left:auto;
margin-right: auto;
border-radius: 50%;
transition: all 1s;
background-color: #fff;
cursor: url(images/cursor/Link%20Select.cur), auto;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes logoimg {
0% {opacity: 0}
50% {opacity: 0}
100% {opacity: 1}
}
/* Standard syntax */
#keyframes logoimg {
0% {top: 0px;}
100% {top: 100px;}
}
#ttt {
transition: all 1s;
}
#section2 {
}
.wrapper {
width:100%;
max-width: 1000px;
padding-top: 50px;
padding-bottom: 50px;
margin-left: auto;
margin-right: auto;
border-bottom: #E0E0E0 solid 1px;
}
h1 {
font-size: 35px;
font-weight: 700;
}
h3 {
font-size: 30px;
font-weight: 700;
}
h2 {
margin-left: 5px;
color:#acacac;
}
p {
margin-left: 8px;
color: #727272;
font-family: 'Lato', sans-serif;
}
a {
transition: all .5s;
color: #727272;
border-bottom: #d8d8d8 2px solid;
text-decoration: none;
cursor: url(images/cursor/Link%20Select.cur), auto;
}
a:hover{
color: #009cff;
}
#topspace {
height:100%;
width: 100%;
}
#logoimg:hover{
background-color: #000;
}
svg:hover #ttt { fill: #fff; }
#quoteart {
font-family: allura;
font-size: 50px;
}
.quote_from {
float:right;
}
.wrapper2 {
width:100%;
max-width: 1000px;
padding-top: 50px;
font-family: lato;
font-weight: 300;
margin-left: auto;
margin-right: auto;
font-size: 20px;
text-align: center;
}
#-webkit-keyframes kaboom {
from {margin-left: 0px;}
to {margin-left: 50px;}
}
/* Standard syntax */
#keyframes kaboom {
from {background-color: #fa2424;}
to {background-color: #fa2424;}
}
.workimg {
cursor: url(images/cursor/Link%20Select.cur), auto;
width:200px;
height:auto;
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: all .5s;
}
.workimg:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
#close_work {
display:none;
}
.formfield {
margin-bottom: 30px;
}
.formfield .col {
float: left;
width: 48.5%;
}
.formfield .col.second {
float: right;
}
.formfield .input-holder {
margin: 0px 0px;
}
input.text, #form-contact textarea {
height: 58px;
color: #7f8c8d;
font-family: Raleway;
font-size: 24px;
border: 1px solid #a5aeaf;
padding: 2px 20px 0px;
margin-left: -21px;
outline: none;
width: 100%;
}
#section4 {
max-width:1392px;
}
#form-contact .formfield {
margin-bottom: 30px;
}
textarea {
color: #7f8c8d;
font-family: 'Raleway';
padding: 20px;
height: 150px;
font-size: 14px;
line-height: 18px;
resize: none;
border: 1px solid #a5aeaf;
margin-left: -21px;
outline: none;
width: 100%;
margin-top:30px;
}
#send-message {
width: 225px;
height: 50px;
background-color: #fff;
color: #a5aeaf;
font-family: 'Raleway';
font-size: 18px;
cursor: url(images/cursor/Link%20Select.cur), auto !important;
float: left;
border: 1px solid #a5aeaf;
-webkit-transition: all 200ms linear;
-o-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
}
#send-message:hover {
color: #8f999a;
border: 1px solid #8f999a;
}
#result {
font-size: 14px;
float: right;
color: #99a3a4;
margin-top: 18px;
text-transform: uppercase;
}
JavaScript
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#result');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
$(document).ready(function () {
makebg(1);
});
$("#sotare").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Sotare" );
$("#work_text").html( "I manipulated stylesheets to make the Sotare store match the wordpress theme my client had on his website.<br><br>What I did - Code." );
});
$("#hmf").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Hide my File" );
$("#work_text").html( "A batch file I created for windows, I wanted to share so I made it a site.<br><br>What I did - Design and Code." );
});
$("#gravchimp").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Gravity Chimp" );
$("#work_text").html( "An Android app I made, which is a part of the flappy idea. I made it a website and it is soon to be released on iOS.<br><br>What I did - Design and Code." );
});
$("#trisearch").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "TriSearching" );
$("#work_text").html( "How about you, try searching with TriSearching! It's a design of a search engine, and the results are swiped over, using Bing.<br><br>What I did - Design and Code." );
});
$("#close_work").click(function(){
$("#close_work").css({"display": "none"});
$("#work_label").text( "" );
$("#work_text").html( "" );
});
var bgcolor = "white";
$("#ttt").click(function(){
if(bgcolor == "white"){
$("body").css({"background-color": "#009cff"});
bgcolor = "blue";
} else{ if(bgcolor == "blue"){
$("body").css({"background-color": "#fff"});
bgcolor = "white";
}
}
});
var currentpoly = 1;
$(window).scroll(function() {
$("#polygons").css({
'opacity' : 1-(($(this).scrollTop())/600)
});
});
function makebg(currentpoly){
if(currentpoly < 31){
var width = randomIntFromInterval(50,300);
var height = width * 2;
var rotation = randomIntFromInterval(1,360);
var top = randomIntFromInterval(1,70);
var left = randomIntFromInterval(10,90);
var opacity = randomIntFromInterval(1,20);
var range = randomIntFromInterval(10,60);
$("#poly" + currentpoly).css({
"width": width,
"height": height,
"-webkit-transform": "rotate(" + rotation + "deg)",
"transform": "rotate(" + rotation + "deg)",
"-ms-transform": "rotate(" + rotation + "deg)",
"top": top + "%",
"left": left + "%",
"opacity": "." + opacity
});
$(document).ready(function () {
var toggleStatus = 'small'
setSmall()
$.plax.enable()
$("#range-small").click(function(){
if(toggleStatus != 'small'){
toggleRange()
}
})
$("#range-big").click(function(){
if(toggleStatus != 'big'){
toggleRange()
}
})
function toggleRange() {
if(toggleStatus == 'small'){
setBig()
} else if (toggleStatus == 'big') {
setSmall()
} else {
console.log(toggleStatus)
}
$("#range-big").toggleClass('active')
$("#range-small").toggleClass('active')
return false
}
function setSmall(){
$("#poly" + currentpoly).plaxify({"xRange":range,"yRange":range});
toggleStatus = 'small'
}
})
currentpoly = currentpoly + 1;
makebg(currentpoly);
}
}
function randomIntFromInterval(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
Please do note, I haven't made my code super clean yet because I'm in the middle of making it, so my JS and other code will be better in the future, lol. Thanks in advance!
If its working on your computer but not mobile make sure your setting the view port inside the head tags: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Im not 100% sure what you want to happen, but assuming you want the website to have a max width of 1000px and for it to shrink as you make it smaller you need to set the main content (in this case the first div section 1) to max-wdith 1000px. It may also be that one of your nested div's has one wrong width percentage/ value set thats stopping it from shrinking. Let me know if any of this helps.