All Projects → misega → HTML5-Banners

misega / HTML5-Banners

Licence: other
HTML5 animated banner boilerplate. Built for Doubleclick & Sizmek ad management platforms.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to HTML5-Banners

nuxt-gsap-module
GSAP module for Nuxt.js
Stars: ✭ 183 (+289.36%)
Mutual labels:  gsap, greensock
ae-ease-to-gsap-customease
Converts the keyframes of the selected property in After Effects to a set of SVG path commands that can be used directly in GreenSock's CustomEase plugin
Stars: ✭ 58 (+23.4%)
Mutual labels:  gsap, greensock
Modern.JS
모던 자바스크립트 라이브러리/프레임워크 × KIPFA(한국인터넷전문가협회)
Stars: ✭ 16 (-65.96%)
Mutual labels:  gsap, greensock
Svg Banners
Styled banners for your Readme made with html/css in SVG !!
Stars: ✭ 145 (+208.51%)
Mutual labels:  banner
Lcbannerview
A very popular and highly customized banner view! Infinite loop support!
Stars: ✭ 158 (+236.17%)
Mutual labels:  banner
Cwcarousel
轮播图banner
Stars: ✭ 228 (+385.11%)
Mutual labels:  banner
ViewWorld
自定义View合集,展示各种自定义View/控件。项目包含了自定义Banner轮播图控件,自定义验证码输入框,自定义TabLayout等控件,持续更新中😉😉😉
Stars: ✭ 94 (+100%)
Mutual labels:  banner
Nativescript Feedback
📢 Non-blocking textual feedback for your NativeScript app
Stars: ✭ 127 (+170.21%)
Mutual labels:  banner
3dstool
An all-in-one tool for extracting/creating 3ds roms.
Stars: ✭ 246 (+423.4%)
Mutual labels:  banner
Neteasecloudmusic
仿网易云音乐安卓客户端V6.0
Stars: ✭ 213 (+353.19%)
Mutual labels:  banner
Revealbanner
🚀🚀🚀 滑动特效banner
Stars: ✭ 209 (+344.68%)
Mutual labels:  banner
Bannerviewpager
🚀 An awesome banner view for Android,Based on ViewPager2. 这可能是全网最好用的ViewPager轮播图。简单、高效,一行代码实现循环轮播,一屏三页任意变,指示器样式任你挑。
Stars: ✭ 2,603 (+5438.3%)
Mutual labels:  banner
React Native Hero
🤘 A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more
Stars: ✭ 234 (+397.87%)
Mutual labels:  banner
Termux Banner
Termux Banner Maker Script by Parixit Sutariya (BullAnonymous)
Stars: ✭ 151 (+221.28%)
Mutual labels:  banner
Jxpagecontrol
🚀🚀🚀 自定义pageControl指示器, 支持多种动画, 自定义布局.
Stars: ✭ 246 (+423.4%)
Mutual labels:  banner
Banner
🔥🔥🔥Banner 2.0 来了!Android广告图片轮播控件,内部基于ViewPager2实现,Indicator和UI都可以自定义。
Stars: ✭ 11,682 (+24755.32%)
Mutual labels:  banner
Pagerecyclerview
PageRecyclerView achieves page turning function and unlimited carousel
Stars: ✭ 241 (+412.77%)
Mutual labels:  banner
Kjbannerviewdemo
轮播图无限自动循环滚动、缩放布局、自带缓存加载读取、支持自定义继承、定制特定样式、动态图和网图混合轮播、支持在Storyboard和Xib中创建并配置其属性、多种滚动方向选择、多种分页控件选择等等
Stars: ✭ 206 (+338.3%)
Mutual labels:  banner
Admobadapter
It wraps your Adapter to display Admob native ads and banners in a ListView/RecyclerView data set. It based on the Yahoo fetchr project https://github.com/yahoo/fetchr
Stars: ✭ 224 (+376.6%)
Mutual labels:  banner
Pmalertcontroller
PMAlertController is a great and customizable alert that can substitute UIAlertController
Stars: ✭ 2,397 (+5000%)
Mutual labels:  banner

HTML5 Banner Boilerplate


Project boilerplate for creating HTML5 animated banners with GSAP.

Download Banner Boilerplate

  • Watch a specific banner folder for changes and update browser during development
  • Compile CSS variables and automatically adds vendor prefixes via POSTCSS
  • Verify each banner has a fallback image and is the appropriate size
  • Generate review site
  • Update all banners to platform-specific distribution (e.g. DoubleClick, Sizmek)
  • Minify files and assets then create directory of zip files for distribution
  • Verify zip file size does not exceed IAB maximum allowable file size

In This Documentation

  1. Getting Started
  2. File Structure
  3. Resources
  4. References

Getting Started

Dependencies

Make sure these are installed first.

Quick Start

  1. Open banners folder.
  2. Inside, rename _banner-template with the banner size (e.g. 300x250)
  3. In bash/terminal/command line, cd into your project directory.
  4. Run npm install to install required files.
  5. When it's done installing, run one of the tasks to get going:
Tasks
gulp Will show all available tasks
gulp watch
--folder
--controls
Watch files for changes and update browser
flag: folder to watch for file changes
flag: controls to play/pause & scrub timeline
gulp review
--preview
--platform
Build review page; ready to push to review ftp
flag: open review page in browser
flag: add zip files to review site; ready for distribution
gulp deploy
--platform
Compress files and zip folders for distribution
flag: ad platform distribution (doubleclick,sizmek)

Update package.json

  • name: Project Code (format: YY-aaa-9999). Information used throughout the build/review/deploy process
    • YY: 2-digit Year
    • aaa: 3-digit Client Code
    • 9999: 4-digit Job Code
  • title: Project Title. Added to the review site

File Structure

.
├── README.md
├── package.json                # list of npm packages and some configurations
├── gulp.js/                    # build configuration
├── node_modules/               # will be created with `npm install`
└─┬ banners/                    # directory to contain all banner sizes
  ├─┬ _banner-support-files/
  │ ├─┬ ad-platform/            # collection of platform-specific documentation
  │ │ ├── doubleclick.md        # documentation; script blocks will be injected via `deploy` task
  │ │ ├── sizmek.md             # documentation; script blocks will be injected via `deploy` task
  │ │ └── EBLoader.js           # required Sizmek script; must load first before ad is displayed
  │ └─┬ controls/
  │   ├── _banners.js           # installs required development assets
  │   ├── banner-controls.js    # installs/instantiates control bar
  │   └── banner-controls.css   # styles for control bar
  └─┬ _banner-template/         # initial banner setup; duplicate to customize
    ├── index.html              # The ad file, with the ad configuration and init code
    ├── fallback.jpg            # required; Formats accepted: JPG, GIF, PNG
    └─┬ assets/
      ├─┬ css/
      │ ├── style.css           # compiled styles; will be created with `watch`, `review`, or `deploy` tasks
      │ ├── source.css          # main styles; compiled by postcss into `style.css`
      │ └── fonts/              # local font files (optional)
      ├─┬ img/                  # graphic files: jpg, gif, png, or svg
      │ └── keyframes/          # keyframe graphics from PSD for layout/placement; removed via `review` or `deploy` task
      └─┬ js/
        └── script.js           # customized banner animation script

Resources

Greensock/GSAP
Greensock 101 - Greensock Tutorials for Beginners
Greensock Cheat Sheet PDF

References

IAB.com
iab.com/guidelines
iab.com - HTML5 for Digital Advertising 2.0 PDF
iab.com - Display Format Guidelines PDF

DoubleClick
DoubleClick Starter Files
DoubleClick Campaign Manager (DCM) HTML5 Validator
DoubleClick CDN/Shared Libraries
Rich Media Gallery

Sizmek
Sizmek Banner Formats
Building Ads / Creating HTML5 Banners
Sizmek CDN/Shared Libraries
Centro uses Sizmek tags

Roadmap

  • update to gulp 4

TODO

  • zipfiles.js
    • minify image assets
  • review -- declare specific folders to use when building a review site
    • allow wildcard filter to select folder names
  • lint on watch: html, css, js
  • cleanup: find unused assets (css, js, images)
  • update controls to add features. See: mojs-player
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].