Browse Source

Add files by Gilson

master
p4block 1 year ago
parent
commit
cc0b168dab
  1. 721
      cs.css
  2. BIN
      fonts/AmericanC.ttf
  3. BIN
      fonts/AvenirCondensed.ttf
  4. BIN
      fonts/NixieOne.ttf
  5. BIN
      fonts/typewcond.otf
  6. BIN
      icons/analytics.png
  7. BIN
      icons/book.png
  8. BIN
      icons/cloud-computing.png
  9. BIN
      icons/files.png
  10. BIN
      icons/gitea.png
  11. BIN
      icons/rss2.png
  12. BIN
      img/Logo-invert-192.png
  13. BIN
      img/Logo-invert-300.png
  14. BIN
      img/Logo-invert-92.png
  15. BIN
      img/Logo-invert.png
  16. BIN
      img/app.JPG
  17. BIN
      img/atresmedia.jpg
  18. BIN
      img/bitup.jpg
  19. BIN
      img/coreboot2.jpg
  20. BIN
      img/flp-dark.jpg
  21. BIN
      img/flp1.jpg
  22. BIN
      img/fosc2.jpg
  23. BIN
      img/hacking.jpg
  24. BIN
      img/junction2018-1.jpg
  25. BIN
      img/junction2018.jpg
  26. BIN
      img/junction2019-1.jpg
  27. BIN
      img/junction2019.jpg
  28. BIN
      img/kids.JPG
  29. BIN
      img/kids1.JPG
  30. BIN
      img/nn.jpg
  31. BIN
      img/nn1.jpg
  32. BIN
      img/pepemod.jpg
  33. BIN
      img/pepemod1.jpg
  34. BIN
      img/printer3d.JPG
  35. BIN
      img/santi.jpg
  36. BIN
      img/sec.jpg
  37. BIN
      img/soldadura.jpg
  38. BIN
      img/soldadura1.jpg
  39. 193
      index.html
  40. 54
      js/main.js

721
cs.css

@ -0,0 +1,721 @@
/* ******************************
* Ah shit, here we go again. *
****************************** */
/*This document is for the FOSC website.
You probably already know that, otherwise you can visit him here "https://fosc.space/"*/
/*First, I'm sorry if there's any mistake, I'm not an expert yet.*/
/*Second, this document is free, so you can see it, use it and modify it as you wish.*/
/*Finally, the document is divided into parts for better reading.*/
/*That's all, thank you.*/
/*NECESSARY FONTS*/
/**********************************************************************************/
@font-face {
font-family: nixiefont;
src: url(fonts/NixieOne.ttf);
}
@font-face {
font-family: AmericanCfont;
src: url(fonts/AmericanC.ttf);
}
@font-face {
font-family: typermfont;
src: url(fonts/typewcond.otf);
}
@font-face {
font-family: avenirfont;
src: url(fonts/AvenirCondensed.ttf);
}
/*GLOBAL ATTRIBUTES*/
/**********************************************************************************/
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: "Roboto", Sans-Serif;
}
body {
background-image: url(img/coreboot2.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: black;
background-attachment: fixed;
}
img {
background-image: none;
}
/*TOP NAVBAR*/
/**********************************************************************************/
nav {
overflow: hidden;
height: 100px;
width: 100%;
position: fixed;
top: 0;
background-color: #000;
}
label img {
margin: 5px 0px;
}
label.logo {
color: white;
font-size: 35px;
line-height: 100px;
padding: 0 50px;
font-weight: bold;
}
nav ul {
float: right;
margin-right: 50px;
}
nav ul li {
display: inline-block;
line-height: 100px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 18px;
padding: 7px 13px;
text-transform: uppercase;
}
nav ul li a i {
margin-right: 10px;
}
nav ul li a.active, nav ul li a:hover {
border-bottom: 3px solid purple;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
/*1 SECTION, WELCOME TO FOSC*/
/**********************************************************************************/
.hero h1 {
text-align: center;
color: white;
font-family: nixiefont;
font-size: 100px;
margin-top: 20%;
}
.color {
background: linear-gradient(to top right, purple, blue);
color: white;
}
.hero h3 {
text-align: center;
color: beige;
font-family: nixiefont;
font-size: 22px;
text-transform: uppercase;
margin-top: 3%;
padding-bottom: 10px;
}
.hero hr {
height: 3px;
background-color: orange;
width: 500px;
margin-left: auto;
margin-right: auto;
border: none;
margin-top: 10px;
}
/*2 SECTION, WHAT IS FOSC?*/
/**********************************************************************************/
.fosc {
text-align: center;
background: #111;
width: 100%;
padding: 50px 0px 30px 0px;
height: auto;
margin-top: 20%;
}
.fosc h1 {
font-size: 120px;
font-family: AmericanCfont;
text-transform: uppercase;
color: white;
margin-left: auto;
margin-right: auto;
}
.fosc hr {
width: 300px;
height: 3px;
background: aqua;
border: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.fosc h3 {
font-family: typermfont;
text-transform: uppercase;
font-size: 28px;
color: beige;
}
/*3 SECTION, GALLERY FOSC*/
/**********************************************************************************/
.gallery {
display: flex;
flex-wrap: wrap;
padding: 10px 50px 50px 50px;
background: #111;
margin-bottom: 0px;
}
.column-gallery {
flex: 20%;
max-width: 25%;
padding: 0px 4px;
}
.column-gallery img {
margin-top: 10px;
vertical-align: middle;
width: 100%;
border: 1px solid white;
}
.mgallery {
background-color: #111;
text-align: center;
padding-bottom: 50px;
}
.mgallery h3 {
color: white;
font-family: avenirfont;
font-size: 32px;
padding: 50px 0px;
margin: 0px 100px;
}
/*4 SECTION, SERVICES*/
/**********************************************************************************/
#services {
padding: 50px 0px;
background-color: #222;
}
.services {
background-color: #222;
padding: 60px 0px 100px 0px;
margin-bottom: 0px;
}
.services h1 {
text-align: center;
font-size: 80px;
font-family: nixiefont;
text-transform: uppercase;
color: white;
margin-bottom: 60px;
}
.services p {
margin: 0px 300px;
font-size: 16px;
text-align: justify;
text-transform: uppercase;
color: #888;
}
.tabla {
display: flex;
padding: 0px;
background-color: #222;
color: white;
}
.tabla2 {
padding-bottom: 50px;
}
.column {
color: white;
text-align: center;
background-color: #222;
flex: 30%;
margin: 10px 60px;
}
.column h4 {
letter-spacing: 2px;
margin-top: 15px;
font-family: Roboto;
text-transform: uppercase;
}
.column img {
width: 30%;
margin-top: 10%;
}
.column img:hover {
filter: grayscale(100%);
}
/*5 SECTION, MEMBERS*/
/**********************************************************************************/
.members {
background-image: url(img/flp-dark.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.shape {
display: flex;
}
.cmembers {
flex: 50%;
margin: 100px 50px 50px 50px;
color: white;
font-family: Roboto;
text-transform: uppercase;
}
.cmembers h4 {
padding-bottom: 0px;
margin-bottom: 10px;
font-size: 24px;
}
.cmembers hr {
width: 500px;
height: 3px;
background: orange;
margin-left: 0px;
margin-bottom: 30px;
border: none;
}
.cmembers p {
text-align: justify;
}
.cmembers span {
background-color: green;
}
.fa-twitter {
color: #2196f3;
margin-left: 10px;
}
#mapButton {
background-color: yellow;
color: black;
padding: 10px;
margin: 20px 0px;
text-transform: uppercase;
border: none;
cursor: pointer;
}
#mapButton:hover {
background-color: purple;
color: white;
transition: 0.5s;
}
#map {
height: 300px;
width: 700px;
}
/*FINALLY, FOOTER*/
/**********************************************************************************/
footer {
background-color: #000;
}
.foot-logo {
text-align: center;
padding: 30px;
}
.foot-logo img {
width: 8%;
}
.foot-logo a {
display: block;
color: white;
margin-top: 20px;
width: 200px;
margin-left: auto;
margin-right: auto;
border-bottom: 2px solid white;
}
.foot-logo p {
color: #444;
margin-top: 10px;
}
.foot-logo p a {
display: inline-block;
border: none;
width: auto;
}
/*FIX RESPONSIVE WEB DESIGN*/
/**********************************************************************************/
@media only screen and (max-width: 1024px) {
.checkbtn {
display: block;
margin-top: 10px;
}
nav {
background-color: #111;
transition: all .5s;
}
label.logo {
font-size: 30px;
padding-left: 10px;
}
ul {
position: fixed;
width: 100%;
height: 100%;
background: #222;
margin-top: 20px;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
font-size: 16px;
}
nav ul li a {
font-size: 20px;
}
nav ul li a:hover, nav ul li a.active {
background: none;
color: white;
}
#check:checked ~ ul {
left: 0;
}
.hero h1 {
font-size: 70px;
}
.fosc h1 {
font-size: 90px;
}
.fosc h3 {
font-size: 24px;
margin: 0px 25px;
}
.services h1 {
font-size: 70px;
}
.services p {
margin: 25px;
}
.column img {
width: 50%;
}
.shape {
flex-direction: column;
padding: 50px 0px;
}
.cmembers {
margin: 0px;
padding: 0px 25px;
}
.cmembers2 {
padding-top: 50px;
}
.cmembers h4 {
font-size: 20px;
}
.cmembers hr {
width: 200px;
}
}
/*RESPOSIVE WEB DESIGN FOR PHONES*/
/**********************************************************************************/
@media only screen and (max-width: 768px) {
.checkbtn {
display: block;
margin-top: 10px;
}
nav {
background-color: #111;
transition: all .5s;
}
label.logo {
font-size: 30px;
padding-left: 10px;
}
ul {
position: fixed;
width: 100%;
height: 100%;
background: #222;
margin-top: 20px;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
font-size: 16px;
}
nav ul li a {
font-size: 20px;
}
nav ul li a:hover, nav ul li a.active {
background: none;
color: white;
}
#check:checked ~ ul {
left: 0;
}
.hero {
padding: 30% 0px;
}
.hero h1 {
font-size: 50px;
text-align: center;
letter-spacing: 3px;
}
.hero h3 {
font-size: 22px;
margin-top: 30px;
margin-left: 25px;
margin-right: 25px;
}
.hero hr {
width: 100px;
margin-top: 0px;
}
.fosc {
padding-bottom: 10px;
}
.fosc h1 {
font-size: 60px;
}
.fosc hr {
width: 150px;
}
.fosc h3 {
font-size: 22px;
margin: 0px 25px;
}
.bgallery {
background-color: #111;
}
.gallery {
padding: 10px;
margin-left: 10px;
margin-right: 10px;
}
.column-gallery {
padding: 0px 2px;
}
.column-gallery img {
margin-top: 2px;
}
.mgallery {
background-color: #111;
text-align: center;
padding-bottom: 50px;
}
.services {
padding: 50px 0px 50px 0px;
}
.mgallery h3 {
font-size: 22px;
padding: 30px 0px 0px 0px;
margin: 0px 25px;
}
.services h1 {
font-size: 40px;
margin-bottom: 30px;
}
.services p {
text-align: justify;
margin: 0px 25px;
}
.column {
padding: 0px;
margin: 0px;
}
.column img {
width: 35%;
margin: 0px;
padding-top: 30px;
}
.column h4 {
font-size: 18px;
}
.tabla2 {
padding-bottom: 50px;
}
.shape {
flex-direction: column;
padding: 50px 0px;
}
.cmembers {
margin: 0px;
padding: 0px 25px;
}
.cmembers2 {
padding-top: 50px;
}
.cmembers h4 {
font-size: 20px;
}
.cmembers hr {
width: 200px;
}
#map {
width: 300px;
margin-top: 10px;
}
.foot-logo img {
width: 25%;
}
.foot-logo p {
margin-top: 20px;
}
.foot-logo p a {
margin: 0px;
}
}

BIN
fonts/AmericanC.ttf

Binary file not shown.

BIN
fonts/AvenirCondensed.ttf

Binary file not shown.

BIN
fonts/NixieOne.ttf

Binary file not shown.

BIN
fonts/typewcond.otf

Binary file not shown.

BIN
icons/analytics.png

Binary file not shown.

After

Width: 512  |  Height: 512  |  Size: 11 KiB

BIN
icons/book.png

Binary file not shown.

After

Width: 512  |  Height: 512  |  Size: 12 KiB

BIN
icons/cloud-computing.png

Binary file not shown.

After

Width: 512  |  Height: 512  |  Size: 16 KiB

BIN
icons/files.png

Binary file not shown.

After

Width: 512  |  Height: 512  |  Size: 6.9 KiB

BIN
icons/gitea.png

Binary file not shown.

After

Width: 880  |  Height: 880  |  Size: 33 KiB

BIN
icons/rss2.png

Binary file not shown.

After

Width: 512  |  Height: 512  |  Size: 9.4 KiB

BIN
img/Logo-invert-192.png

Binary file not shown.

After

Width: 192  |  Height: 192  |  Size: 26 KiB

BIN
img/Logo-invert-300.png

Binary file not shown.

After

Width: 300  |  Height: 300  |  Size: 38 KiB

BIN
img/Logo-invert-92.png

Binary file not shown.

After

Width: 92  |  Height: 92  |  Size: 16 KiB

BIN
img/Logo-invert.png

Binary file not shown.

After

Width: 1067  |  Height: 1067  |  Size: 147 KiB

BIN
img/app.JPG

Binary file not shown.

After

Width: 900  |  Height: 600  |  Size: 142 KiB

BIN
img/atresmedia.jpg

Binary file not shown.

After

Width: 1443  |  Height: 1080  |  Size: 358 KiB

BIN
img/bitup.jpg

Binary file not shown.

After

Width: 1280  |  Height: 960  |  Size: 112 KiB

BIN
img/coreboot2.jpg

Binary file not shown.

After

Width: 1920  |  Height: 1080  |  Size: 200 KiB

BIN
img/flp-dark.jpg

Binary file not shown.

After

Width: 1457  |  Height: 1080  |  Size: 410 KiB

BIN
img/flp1.jpg

Binary file not shown.

After

Width: 1457  |  Height: 1080  |  Size: 174 KiB

BIN
img/fosc2.jpg

Binary file not shown.

After

Width: 810  |  Height: 1080  |  Size: 190 KiB

BIN
img/hacking.jpg

Binary file not shown.

After

Width: 1280  |  Height: 960  |  Size: 174 KiB

BIN
img/junction2018-1.jpg

Binary file not shown.

After

Width: 900  |  Height: 673  |  Size: 194 KiB

BIN
img/junction2018.jpg

Binary file not shown.

After

Width: 1920  |  Height: 1080  |  Size: 387 KiB

BIN
img/junction2019-1.jpg

Binary file not shown.

After

Width: 1620  |  Height: 1080  |  Size: 401 KiB

BIN
img/junction2019.jpg

Binary file not shown.

After

Width: 1620  |  Height: 1080  |  Size: 501 KiB

BIN
img/kids.JPG

Binary file not shown.

After

Width: 1623  |  Height: 1080  |  Size: 410 KiB

BIN
img/kids1.JPG

Binary file not shown.

After

Width: 1623  |  Height: 1080  |  Size: 339 KiB

BIN
img/nn.jpg

Binary file not shown.

After

Width: 1440  |  Height: 1080  |  Size: 175 KiB

BIN
img/nn1.jpg

Binary file not shown.

After

Width: 1457  |  Height: 1080  |  Size: 238 KiB

BIN
img/pepemod.jpg

Binary file not shown.

After

Width: 810  |  Height: 1080  |  Size: 194 KiB

BIN
img/pepemod1.jpg

Binary file not shown.

After

Width: 1440  |  Height: 1080  |  Size: 422 KiB

BIN
img/printer3d.JPG

Binary file not shown.

After

Width: 1623  |  Height: 1080  |  Size: 268 KiB

BIN
img/santi.jpg

Binary file not shown.

After

Width: 1440  |  Height: 1080  |  Size: 407 KiB

BIN
img/sec.jpg

Binary file not shown.

After

Width: 1440  |  Height: 1080  |  Size: 351 KiB

BIN
img/soldadura.jpg

Binary file not shown.

After

Width: 1620  |  Height: 1080  |  Size: 247 KiB

BIN
img/soldadura1.jpg

Binary file not shown.

After

Width: 1620  |  Height: 1080  |  Size: 352 KiB

193
index.html

@ -0,0 +1,193 @@
<!DOCTYPE html>
<!-- ****************************** -->
<!-- * Ah shit, here we go again. * -->
<!-- ****************************** -->
<!-- Hi guys, this document is for the FOSC website. You probably already know that, otherwise you can visit him here "https://fosc.space/" -->
<!-- First, I'm sorry if there's any mistake, I'm not an expert yet. -->
<!-- Second, this document is free, so you can see it, use it and modify it as you wish. -->
<!-- Finally, the document is divided into parts for better reading. The style pages and scripts are in different documents. The google fonts and others icons are linked in head section. -->
<!-- That's all, thank you. -->
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="FOSC, Hackerspace from Cartagena">
<meta name="keywords" content="Open Source, Free Software, Linux, Hackerspace, Foss">
<meta name="author" content="FOSC">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="cs.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<title>FOSC - Free Open Source Club</title>
<script src="js/main.js"></script>
</head>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class="logo">
<img class="lazy" data-src="img/Logo-invert-92.png">
</label>
<ul>
<li><a class="active" href="https://fosc.space/"><i class="fa fa-home"></i>Home</a></li>
<li><a href="https://blog.fosc.space"><i class="fa fa-book"></i>Blog</a></li>
<li><a href="#services"><i class="fa fa-cogs"></i>Services</a></li>
<li><a href="https://gallery.fosc.space"><i class="fa fa-image"></i>Gallery</a></li>
<li><a href="https://download.fosc.space"><i class="fa fa-download"></i>Donwloads</a></li>
<li><a href="#contact"><i class="fa fa-user"></i>Contact</a></li>
</ul>
</nav>
</header>
<body>
<div class="hero">
<h1>Welcome to <span class="color">FOSC</span></h1>
<h3>Hackerspace located at Polytechnic University of Cartagena</h3>
<hr>
</div>
<div class="fosc">
<h1>What is FOSC?</h1>
<hr>
<h3>We are a student association focused on expanding free software and hacker culture</h3>
</div>
<div class="bgallery">
<div class="gallery">
<div class="column-gallery">
<img class="lazy" data-src="img/junction2018.jpg">
<img class="lazy" data-src="img/santi.jpg">
<img class="lazy" data-src="img/kids.jpg">
<img class="lazy" data-src="img/sec.jpg">
<img class="lazy" data-src="img/junction2018-1.jpg">
</div>
<div class="column-gallery">
<img class="lazy" data-src="img/app.jpg">
<img class="lazy" data-src="img/bitup.jpg">
<img class="lazy" data-src="img/soldadura.jpg">
<img class="lazy" data-src="img/hacking.jpg">
<img class="lazy" data-src="img/junction2019-1.jpg">
</div>
<div class="column-gallery">
<img class="lazy" data-src="img/pepemod.jpg">
<img class="lazy" data-src="img/atresmedia.jpg">
<img class="lazy" data-src="img/junction2019.jpg">
<img class="lazy" data-src="img/printer3d.jpg">
</div>
<div class="column-gallery">
<img class="lazy" data-src="img/flp1.jpg">
<img class="lazy" data-src="img/soldadura1.jpg">
<img class="lazy" data-src="img/nn1.jpg">
<img class="lazy" data-src="img/fosc2.jpg">
</div>
</div>
</div>
<div class="mgallery">
<h3>Development of free software projects, realization of courses of various technologies, maintenance of a server to provide services both inside and outside the association, dissemination of talks, job offers and any other information of interest to the partners.</h3>
</div>
<div id="services">
<div class="services">
<h1>OUR SERVICES</h1>
<p>Formal members are stored in our member database and have access to the multitude of services we provide. Check out our list of services below. Additionally, the tools and materials in the space are available for you to hack and mess with.</p>
</div>
<div class="tabla">
<div class="column">
<a href="https://cloud.fosc.space">
<img class="lazy" data-src="icons/cloud-computing.png" alt="Cloud">
</a>
<h4>Cloud</h4>
</div>
<div class="column">
<a href="https://doc.fosc.space">
<img class="lazy" data-src="icons/book.png" alt="Wiki">
</a>
<h4>Wiki</h4>
</div>
<div class="column">
<a href="https://rss.fosc.space">
<img class="lazy" data-src="icons/rss2.png" alt="RSS">
</a>
<h4>RSS</h4>
</div>
</div>
<div class="tabla tabla2">
<div class="column">
<a href="https://netdata.fosc.space">
<img class="lazy" data-src="icons/files.png" alt="NetData">
</a>
<h4>NetData</h4>
</div>
<div class="column">
<a href="https://analytics.fosc.space">
<img class="lazy" data-src="icons/analytics.png" alt="Analytics">
</a>
<h4>Analytics</h4>
</div>
<div class="column">
<a href="https://git.fosc.space">
<img class="lazy" data-src="icons/gitea.png" alt="Gitea">
</a>
<h4>Stolen Code</h4>
</div>
</div>
</div>
<div class="members" id="contact">
<div class="shape">
<div class="cmembers cmembers1">
<h4>How do I become a member?</h4>
<hr>
<p>You become a member by either coming to our physical hackerspace often, or patronizing it.<br><br>
If the lights are on, you are free to come and hack inside.<br><br>
<span>Even if you are not a member you are welcome to come in anytime.</span><br><br>
Becoming a member is less of a legal process and more of a trust process, there is no way to become a member without being accepted by others in the group.<br><br>
If you've been coming a lot to the space, it's likely that you will be asked to become a formal member.</p>
</div>
<div class="cmembers cmembers2">
<h4>We're looking for new members, students are specially welcome</h4>
<hr>
<div class="twitter">
<p>Contact with us on Twitter<a href="https://twitter.com/foscupct" class="fa fa-twitter"></a></p>
</div>
<div class="button">
<button onclick="loadMap()" id="mapButton">Or just come in</button>
</div>
<div class="map">
<iframe id="map" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
<footer>
<hr>
<div class="foot-logo">
<img class="lazy" data-src="img/Logo-invert.png">
<a href="#">CODE OF THIS WEBSITE</a>
<p>Thank you a www.flaticon.es, you can see more about them <a href="https://www.flaticon.es/">here</a>.</p>
</div>
</footer>
</html>

54
js/main.js

@ -0,0 +1,54 @@
function loadMap() {
var site = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076";
document.getElementById('map').src = site;
}
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazy");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".lazy");
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
})
Loading…
Cancel
Save