AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Nice animation for logo link

Browse Source
This commit is contained in:
Tom Raithel
2017-02-23 22:12:43 +01:00
parent 71e33276be
commit 5e57c9caae
7 changed files with 91 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/icons/back.svg
View File

@@ -1,10 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="30px" height="21px" viewBox="0 0 30 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Combined Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M4.0121205,11.4268265 L28.7159803,11.4268265 C29.3420609,11.4268265 29.8495995,10.9192879 29.8495995,10.2932072 C29.8495995,9.66712664 29.3420609,9.15958803 28.7159803,9.15958803 L3.72871569,9.15958803 L10.9530947,1.93520905 C11.3958005,1.49250321 11.3958005,0.774735221 10.9530947,0.332029381 C10.5103888,-0.11067646 9.79262085,-0.11067646 9.34991501,0.332029381 L0.332029381,9.34991501 C-0.0720094163,9.75395381 -0.107299183,10.3871039 0.22616008,10.831165 C0.324565179,11.0133559 0.471399155,11.1655433 0.649413844,11.2704791 L9.34991501,19.9709803 C9.79262085,20.4136861 10.5103888,20.4136861 10.9530947,19.9709803 C11.3958005,19.5282745 11.3958005,18.8105065 10.9530947,18.3678006 L4.0121205,11.4268265 Z" id="Combined-Shape" fill="#F79223"></path>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 30 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="Combined-Shape" d="M4.012,11.427l24.704,0c0.626,0 1.134,-0.508 1.134,-1.134c0,-0.626 -0.508,-1.133 -1.134,-1.133l-24.987,0l7.224,-7.225c0.443,-0.442 0.443,-1.16 0,-1.603c-0.443,-0.443 -1.16,-0.443 -1.603,0l-9.018,9.018c-0.404,0.404 -0.439,1.037 -0.106,1.481c0.099,0.182 0.245,0.335 0.423,0.439l8.701,8.701c0.443,0.443 1.16,0.443 1.603,0c0.443,-0.443 0.443,-1.16 0,-1.603l-6.941,-6.941Z" style="fill:#fff;"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 833 B

2
js/components/Footer.js
View File

@@ -9,7 +9,7 @@ export default function Footer({ items, pageName }) {
return (
<Branding
logoContent={<img src="/assets/logo.svg"/>}
logoContent={<img src="/assets/logo.svg" width="150px" height="60px" />}
>
<span className="footnote">
AOE is a leading provider of Enterprise Open Source web solutions.

9
js/components/Header.js
View File

@@ -1,11 +1,16 @@
import React from 'react';
import Branding from './Branding';
import Link from './Link';
import LogoLink from './LogoLink';
import { getItemPageNames } from '../../common/config';
export default function Header({ pageName }) {
const smallLogo = pageName !== 'index';
export default function Header() {
return (
<Branding
logoContent={<Link pageName="index"><img src="/assets/logo.svg"/></Link>}
logoContent={<LogoLink small={smallLogo} />}
>
<div className="nav">
<div className="nav__item">

17
js/components/LogoLink.js Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import classNames from 'classnames';
import Link from './Link';
export default function LogoLink({ small=false }) {
return (
<Link pageName="index" className={classNames('logo-link', { 'logo-link--small': small })}>
<span className="logo-link__icon icon icon--back"></span>
<span className="logo-link__slide">
<img className="logo-link__img" src="/assets/logo.svg" width="150px" height="60px" />
<span className="logo-link__text">
Technology Radar
</span>
</span>
</Link>
);
}

4
styles/components/branding.css
View File

@@ -12,9 +12,7 @@
&__logo {
flex: 0 0 200px;
& img {
display: block;
width: 150px;
height: 60px;
display: inline-block;
}
}

63
styles/components/logo-link.css Normal file
View File

@@ -0,0 +1,63 @@
.logo-link {
display: inline-block;
transition: 200ms all ease-out;
width: 400px;
color: var(--color-white);
text-decoration: none;
position: relative;
&__slide {
transition: 400ms all cubic-bezier(0.54, 0, 0.28, 1);
display: block;
position: relative;
}
&__icon {
transition: 400ms opacity ease-out;
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
}
&__img {
transition: 400ms all cubic-bezier(0.54, 0, 0.28, 1);
}
&__text {
transition: 400ms all cubic-bezier(0.54, 0, 0.28, 1);
position: absolute;
top: 50%;
left: 130px;
white-space: nowrap;
font-size: 18px;
line-height: 1;
margin-top: -1px;
transform: translateY(-50%);
opacity: 0;
}
&--small {
.logo-link__img {
transform: scale(0.55);
}
.logo-link__text {
opacity: 0.8;
}
.logo-link__slide {
transform: translateX(-32px);
}
&:hover {
.logo-link__icon {
opacity: 1;
}
.logo-link__slide {
transform: translateX(0);
}
}
}
}

1
tasks/watch.js
View File

@@ -33,6 +33,7 @@ runBuild('all');
watch(stylesPath(), options, watchBuild('css'));
watch(jsPath(), options, watchBuild('js'));
watch(jsPath(), options, watchBuild('pages'));
watch(assetsPath(), options, watchBuild('assets'));
watch(radarPath(), options, watchBuild('pages'));