Skip to content

Adds particle.js and add transitions #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
filipelinhares wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Adds particle.js and add transitions #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b24d66
Adds particle-js and animate header entry
filipelinhares Oct 27, 2016
f534e84
Adds in-view script
filipelinhares Oct 28, 2016
5cb8647
Improves animations
filipelinhares Oct 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 82 additions & 42 deletions public_html/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@ label {
width: 60px;
}

.section-hero {
margin-right: 100px;
}

[data-active="home"] .logo {
display: block;
}
Expand All @@ -87,6 +91,11 @@ label {
fill: #222;
}


[data-active="projects"] .section-anchor {
color: #222;
}

.manifesto {
display: none;
font-size: 1.5rem;
Expand All @@ -108,6 +117,7 @@ label {
padding: 4px 5px;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
}

.section-anchor:hover,
Expand All @@ -116,24 +126,9 @@ label {
color: #222;
}

[data-active="projects"] .section-anchor {
color: #222;
}

[data-active="technology"] .section-anchor:hover,
[data-active="technology"] .section-anchor.active {
color: #2D7A7E;
}

[data-active="projects"] .section-anchor:hover,
[data-active="projects"] .section-anchor.active {
color: #F3D430;
background-color: #222;
}

.section {
min-height: 600px;
padding: 215px 0 100px;
min-height: 100vh;
padding: 100px 0 100px;
position: relative;
display: flex;
align-items: center;
Expand All @@ -156,32 +151,25 @@ label {
}

.section-header {
display: none;
font-weight: bolder;
will-change: transform;
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 20px 0;
text-align: center;
text-transform: uppercase;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
z-index: 2;
transition: all .3s;
}

.header-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none;
}

.with-fixed-header .header-bg {
display: block;
}

.with-fixed-header .section-header {
display: block;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 2;
.section-header.active {
opacity: 1;
transform: translateY(0);
visibility: visible;
}

#home {
Expand Down Expand Up @@ -283,15 +271,24 @@ label {
color: #222;
}

.technology-anchor:hover:after {
.technology-anchor:after {
content: '+';
font-size: 5rem;
right: 37px;
position: absolute;
right: 17px;
top: -15px;
font-weight: 600;
color: #F3D430;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all .3s;
}

.technology-anchor:hover:after {
right: 37px;
opacity: 1;
visibility: visible;
}

.main-title {
Expand Down Expand Up @@ -519,10 +516,45 @@ input[type="button"].button-primary:focus {
}

.technology-anchors {
position: absolute;
right: 0;
text-align: right;
top: 0;
transform: translateX(100%);
position: absolute;
text-align: right;
}

[data-active="technology"] .technology-anchors {
transform: translateX(0);
}

.technology-anchor {
transform: translateX(100%);
will-change: transform, padding;
}

[data-active="technology"] .tech-big-data {
transform: translateX(0);
transition: transform .3s, padding .3s;
}

[data-active="technology"] .tech-articles {
transform: translateX(0);
transition: transform .4s, padding .3s;
}

[data-active="technology"] .tech-hack {
transform: translateX(0);
transition: transform .6s, padding .3s;
}

[data-active="technology"] .tech-open-source {
transform: translateX(0);
transition: transform .7s, padding .3s;
}

[data-active="technology"] .tech-rails-workshop {
transform: translateX(0);
transition: transform .8s, padding .3s
}

.technology-anchor.columns {
Expand Down Expand Up @@ -584,3 +616,11 @@ input[type="button"].button-primary:focus {
width: 82.6666666667%;
}
}

.particles-js-canvas-el {
position: absolute;
}

.ov-h {
overflow: hidden;
}
44 changes: 28 additions & 16 deletions public_html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,30 +70,40 @@
<path class="logo-path" d="M143.9 200.348c-.77 0-1.528-.23-2.177-.673L35.995 127.51c-1.34-.916-1.966-2.573-1.562-4.146.402-1.574 1.746-2.727 3.36-2.885l145-14.253c1.376-.132 2.715.474 3.52 1.596.8 1.12.944 2.586.373 3.843l-39.27 86.417c-.473 1.038-1.378 1.814-2.476 2.12-.34.096-.69.145-1.04.145zm-94.775-73.225l93.16 63.587 34.603-76.145-127.763 12.558z"/>
</svg>
<ul class="manifesto">
<li class="manifesto-item"><a href="#who-we-are" class="section-anchor">Somos a CODELAND</a></li>
<li class="manifesto-item"><a href="#projects" class="section-anchor">Construímos produtos</a></li>
<li class="manifesto-item"><a href="#technology" class="section-anchor">Somando tecnologia</a></li>
<li class="manifesto-item"><a href="#contact" class="section-anchor">Com a sua ideia</a></li>
<li class="manifesto-item">
<a href="#who-we-are" class="section-anchor">Somos a CODELAND</a>
</li>
<li class="manifesto-item">
<a href="#projects" class="section-anchor">Construímos produtos</a>
</li>
<li class="manifesto-item">
<a href="#technology" class="section-anchor">Somando tecnologia</a>
</li>
<li class="manifesto-item">
<a href="#contact" class="section-anchor">Com a sua ideia</a>
</li>
</ul>

<section class="section with-fixed-header" id="home">
<header class="section-header"></header>
<div class="container content">
<h1 class="main-title">
<div class="section-hero">
<h1 class="main-title">
<object type="image/svg+xml" data="imgs/lettering.svg" class="three columns logo-lettering">
CODELAND
</object>
</h1>
<strong class="slogan">Contruímos produtos digitais para quem quer fazer diferente</strong>
</div>
</div>
</section>

<section class="section" id="who-we-are">
<section data-real-section class="section" id="who-we-are">
<header class="section-header">
<div class="container">
<h2 class="section-title">Somos a CODELAND...</h2>
</div>
</header>

<div class="container content" id="cc">
<div class="offset-by-one ten columns">
<p>Nosso trabalho é garantir que o melhor da tecnologia junto das melhores práticas de desenvolvimento de projetos estejam disponíveis para você, que quer fazer diferente. Acreditamos que software se trata de pessoas e de comunidades.</p>
Expand All @@ -103,7 +113,7 @@ <h2 class="section-title">Somos a CODELAND...</h2>
</div>
</section>

<section class="section" id="projects">
<section data-real-section class="section" id="projects">
<header class="section-header">
<div class="container">
<h2 class="section-title">Construímos produtos...</h2>
Expand Down Expand Up @@ -195,25 +205,25 @@ <h2 class="section-title">Construímos produtos...</h2>
</div>
</section>

<section class="section" id="technology">
<section data-real-section class="section" id="technology">
<header class="section-header">
<div class="container">
<h2 class="section-title">Somando tecnologia...</h2>
</div>
</header>
<div class="container content">
<div class="container content ov-h">
<img src="imgs/technology.png" alt="" class="technology-picture u-max-full-width" />
<ul class="technology-anchors">
<li><a href="https://datasciencebr.com/" class="technology-anchor twelve columns">Big Data</a></li>
<li><a href="http://blog.codeland.com.br/" class="technology-anchor twelve columns">Artigos</a></li>
<li><a href="http://dothack.codeland.com.br/" class="technology-anchor twelve columns">.Hack</a></li>
<li><a href="https://github.com/codelandev" class="technology-anchor twelve columns">Open Source</a></li>
<li><a href="https://vimeo.com/159885414" class="technology-anchor twelve columns">Rails workshop</a></li>
<li><a href="https://datasciencebr.com/" class="tech-big-data technology-anchor twelve columns">Big Data</a></li>
<li><a href="http://blog.codeland.com.br/" class="tech-articles technology-anchor twelve columns">Artigos</a></li>
<li><a href="http://dothack.codeland.com.br/" class="tech-hack technology-anchor twelve columns">.Hack</a></li>
<li><a href="https://github.com/codelandev" class="tech-open-source technology-anchor twelve columns">Open Source</a></li>
<li><a href="https://vimeo.com/159885414" class="tech-rails-workshop technology-anchor twelve columns">Rails workshop</a></li>
</ul>
</div>
</section>

<section class="section" id="contact">
<section data-real-section class="section" id="contact">
<header class="section-header">
<div class="container">
<h2 class="section-title">Com a sua ideia.</h2>
Expand Down Expand Up @@ -286,5 +296,7 @@ <h2 class="section-title">Com a sua ideia.</h2>

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js"></script>
<script src="js/particle.js"></script>
<script src="js/in-view.js"></script>
<script src="js/master.js"></script>
</html>
6 changes: 6 additions & 0 deletions public_html/js/in-view.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading